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一 v/ 一 本 为 新 一 代 CSS 所 写 的 新 一 代 CSS 图 书 。 
全 彩印 刷 在 我 所 知 的 技术 专家 中 ， 没 人 比 Lea Verou 
更 能 领会 新 一 代 CS5 的 精髓 。* 

一 一 Jeffrey Zeldman, 《网 站 重 构 》 作 者 


全 新 解答 网 页 设计 经 典 难题 
涵盖 7 大 主题 ，47 个 CSS 技 巧 


| [着 LEA VEROU 著 | 
CSS 魔 法 译 | 
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Eric Meyer、 Jeremy Keith 
等 前 端 大 师 倾 情 推 荐 


加 中 国 工 信 出 版 集团 ” 噬 公 民 邮 电 出 版 社 


效 字 版 权 巨 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
尸 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅 读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 民 知 
EE 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 尸 实 施 包 括 但 不 限于 关闭 该 
帐号 每 维权 措施 ， 并 可 能 退 究 法 律 


贡 任 。 





Lea Verou 

W3C CSS 工 作 组 特 邀 专家 ， 设 计 CSS 语 言 
的 委员 之 一 ， 此 前 曾 在 W3C 担 任 开发 者 
代言 人 。 目 前， 她 在 麻 省 理工 学 院 从 事 
人 机 交互 领域 的 研究 。 她 还 是 一 位 博客 
作家 ， 并 经 常 在 国际 性 技术 会 议 上 担任 
讲师 ;她 创建 的 多 个 开源 项 目 广 受 开发 
者 欢迎 。 





CSS 魔 法 

原名 张 鹏 ， 国 内 知名 CSS 技 术 专 家 ， 百 
姓 网 前 端 架构 师 。 拥 有 近 十 年 的 网 站 开 
发 经 验 ， 在 移动 前 端 领域 积累 颇 深 ， 自 
称 “ 披 着 工程 师 外 衣 的 设计 师 ”。 他 
是 CMUI、Action、GHX 等 开源 项 目的 作 
者 ， 曾 为 GitHub、Gulp、Stylus 等 网 站 和 
项 目 翻译 过 大 量 文档 ， 其 生动 活泼 、 循 
序 渐进 的 博客 写作 风格 深 受 读者 喜爱 ， 
在 CSS Conf 等 技术 会 议 上 的 演讲 广 受 好 
评 。 
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内 容 提 要 
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攻克 每 天 都 会 过 到 的 各 种 网 页 样式 难题 。 
本 书 的 读者 对 象 为 前 端 工 程 师 、 网 页 开发 人 员 。 
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证 以 此 书 献 给 
我 的 母亲 兼 我 最 好 的 朋友 : 
匆匆 离世 的 Maria Verou (1952 一 2013) 





本 书 赞 省 


“这 本 书 是 为 新 一 代 CSS 所 写 的 新 一 代 CSS 图 书 。 也 许 从 前 的 CSS 只 会 让 你 联想 到 浏览 器 里 的 各 种 

小 把 戏 ， 但 如 今 CSS 已 经 成 为 一 门 功 能 强大 、 具 备 完整 生态 、 涉 及 80 多 项 W3C 规范 的 复杂 语言 。 在 我 

所 知 的 技术 专家 中 ， 没 人 比 Lea Verou 更 能 领会 新 一 代 CSS 的 精 盯 ， 没 人 能 像 她 那样 透彻 地 给 出 问题 解决 
之 

一 一 Jeffrey Zeldman, 《网 站 重 构 》 作 者 


“ 极 少 有 哪 本 书 能 像 Lea Verou 的 这 本 《CSS 揭秘 》 一 样 引 括 如 此 之 多 的 实用 技巧 。 它 针对 常见 的 网 
页 设计 难题 提出 了 数不胜数 的 解决 方案 ， 手 到 扒 来 、 高 效 可 靠 ， 堪 称 CSS 智慧 与 技巧 的 集大成 之 作 。 哪 
怕 你 自 认 是 CSS 领域 的 专家 ， 这 本 书 仍 然 值得 一 读 ! ” 
Vitaly Friedman，Smashing Magazine 联合 创始 人 兼 总 编 





“每 当 我 读 到 Lea Verou 的 文章 时 ， 总 能 收获 新 技能 。 这 本 《CSS 揭秘 》 也 不 例外 。 这 本 书 经 过 了 精心 
编排 ， 把 丰富 的 经 验 和 技巧 分 解 为 一 篇 篇 的 短文 ， 鸡 读 甸 懂 。 尽 管 书 中 的 部 分 内 容 颇 具 前 脆性， 但 大 多 数 
知识 还 是 极为 实用 的 ， 我 在 自己 的 项 目 中 就 用 到 了 很 多 。” 

一 一 Jonathan Snook， 网 页 设计 师 兼 开发 者 


“Lea 的 这 本 书 棒 极 了 。 她 对 CSS 的 运用 已 到 化 境 ， 我 敢 说 即便 是 CSS 规范 的 作者 也 无 法 想像 ! 这 本 
书 的 每 个 章节 各 具 特 色 ， 哇 现 了 各 式 各 样 的 技巧 ， 它 将 教会 你 用 多 种 思路 来 达成 各 式 各 样 的 设计 效果 。 不 
久之 后 ， 你 在 工作 中 就 会 不 由 自主 地 念 念 有 词 : “ 嗯 ， 这 个 效果 可 以 用 Lea 的 方法 来 完美 实现 ! ”甚至 在 
不 知 不 觉 之 中 ， 你 的 网 站 都 不 怎么 需要 用 到 图 片 了 ， 因 为 你 已 经 把 所 有 图 形 效果 都 写成 了 易于 维护 的 CSS 
组 件 。 最 重要 的 是 ， 她 的 表达 方式 生动 活泼 ， 注 重 实效 但 又 不 失 奇 趣 ! ” 
Nicole Sullivan， 资 深 软 件 工 程 师 ，OOCSS 项 目 创 始 人 





“Lea Verou 的 这 本 《CSS 揭秘 》 不 只 是 一 套 CSS 技巧 的 合集 ， 更 是 一 本 注重 实效 的 CSS 经 典 教科 书 。 
在 每 篇 攻略 中 ， 她 不 仅 讲授 解决 问题 的 方法 ， 更 会 深入 解析 背后 的 思路 ， 从 而 教会 你 如 何 自 行 探索 更 多 的 
CSS 奥秘 。 千 万 不 要 错过 第 1 章 引 言 ， 那 里 有 你 不 可 不 知 的 CSS 最 佳 实践 。” 

Elika J. Etemad (网 名 fantasai)，W3C CSS 工作 组 特 邀 专家 





“Lea 在 全 球 各 地 的 技术 会 议 上 所 作 的 演讲 早已 成 为 不 可 错过 的 学 习 素 材 。 作 为 她 多 年 经 验 的 提炼 与 
升华 ， 这 本 《CSS 揭秘 》 为 各 种 网 页 设计 顽症 提供 了 优雅 的 解决 方 委 ， 更 重要 的 是 ， 它 展示 了 CSS 解决 

习题 的 方式 和 思路 。 这 绝对 是 每 位 前 端 设计 师 和 开发 者 必 读 的 一 本 书 。” 
一 一 Dudley Storey， 设 计 师 、 开 发 者 、 作 家 、Web 教育 专家 


“我 一 直 以 为 我 对 CSS 的 理解 已 经 达到 相当 高 的 层次 了 ， 直 到 我 读 到 了 Lea Verou 的 这 本 书 。 如 果 你 
希望 把 自己 的 CSS 技能 提升 到 一 个 新 的 段位 ， 那 这 本 书 正 是 不 二 之 选 。” 
一 一 Ryan Seddon，Zendesk 团队 负责 人 


“《CSS 揭秘 》 是 迄今 为 止 我 在 这 个 领域 里 读 到 的 最 具 专 业 性 的 书 。 或 许 你 曾 以 为 CSS 这 门 语 言 简单 
无 奇 , 但 Lea 已 将 它 的 疆域 拓展 为 如 此 广 训 的 一 片 天 地 ， 令 人 叹为观止 。 这 本 书 显 然 不 适合 初学 者 ， 但 我 
会 强烈 推荐 给 每 一 位 自信 精通 CSS 的 开发 者 。” 

一 一 Hugo Giraudel， 前 端 开 发 者 ，Edenspiekermann 公司 工程 师 


“我 一 直觉 得 CSS 就 像 是 一 种 魔法 : 客 窜 数 行 的 代码 就 可 以 让 你 的 网 页 脱胎 换 骨 、 焕 然 一 新 。 在 
《CSS 揭秘 》 中 ，Lea 将 这 种 魔法 提升 到 了 一 个 全 新 的 境界 。 她 就 像 是 一 位 CSS 魔法 大 师 ， 带 领 我 们 在 这 
个 充满 魔力 的 世界 里 自由 萌 翔 。 在 阅读 这 本 书 的 过 程 中 ， 我 曾 无 数 次 地 脱口 而 出 : “这 简直 帅 了 呆 了 ! ”这 
本 书 唯 一 的 问题 在 于 ， 在 读 完 它 之 后 ， 我 已 对 其 他 事情 兴趣 全 无 ， 终 日 沉溺 在 CSS 的 魔幻 之 中 无 法 自 
拔 。” 


一 一 Elisabeth Robson，WickedlySmart.com 联合 创始 人 , 《深入 浅 出 JavaScript 编程 》 联 合作 者 


“《CSS 揭秘 》 值 得 被 每 一 位 网 页 开发 者 收入 继 中 。 这 本 书 将 传授 给 你 丰 写 的 经 验 和 技巧 ， 帮 助 你 实现 
那些 你 原 以 为 不 可 能 用 CSS 完成 的 任务 。 最 令 eye 
ee "a 

一 一 Robin Nixon， 网 页 开发 者 、 在 线 讲 师 、 多 本 CSS 书籍 的 作者 


“Lea Verou 是 一 位 网 页 设计 和 开发 领域 的 ~ 她 的 书 跟 她 的 代码 一 样 家 有 美感 、 饱 含 智慧 。 不 论 你 
对 CSS 是 否 精通 ， 也 不 论 你 对 CSS3 的 种 种 细节 是 否 了 解 ， 这 本 书 总 有 适合 你 的 地 方 。” 
一 一 Estelle Weyl， 开 放 Web 布道 师 , 《CSS 权威 指南 》 联 合作 者 
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译 者 友 


我 在 微 博 上 发 起 了 一 个 小 调查 ， 结 末 证 实 了 我 的 猜测 一 一 大 约 有 30% 
的 该 者 是 几乎 不 看 详 痢 序 的 。 于 是 我 就 脑 洞 大 开 了 : 我 在 纸 质 书 中 把 详 痢 序 
的 篇 幅 压缩 到 最 短 一 节省 了 一 页 纸 一 凑巧 减少 了 一 个 印张 一 成 本 下 降 一 售 价 
降低 一 销量 大 增 。 这 电 不 是 功德 无 量 的 大 好 事 ? 蝴蝶 效应 谁 知 道 呢 ! 


因此 ， 这 篇 详 肴 序 将 只 包含 致谢 环 。( 当 然 ， 我 知道 还 有 50% 的 朋友 
是 必 看 幸 者 序 的 。 请 放心 ， 我 会 在 网 上 为 你 们 准备 一 篇 超 长 完整 版 ,) 
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感谢 百姓 网 各 位 小 伙伴 的 支持 和 玛 励 。 百 姓 网 是 工程 师 的 天 答 一 一 回顾 
我 职业 履历 的 各 个 阶段 ， 只 有 现在 的 我 才 有 可 能 完成 这 项 挑战 。 


感谢 我 的 妻子， 是 你 的 文 持 和 监督 你 障 了 翻 详 工作 的 如 期 完成 。 


感谢 每 一 位 读者 一 也 就 是 此 时 此 刻 手 捧 这 本 书 的 你 。 这 是 一 本 难得 的 
好 书 ， 而 你 的 海 心 研习 与 融会 贵 通 将 会 令 它 的 价值 更 加 座 远 。 


















































最 后 ， 我 还 为 所 有 看 完 译 者 序 的 朋友 准备 了 一 件 礼 物 : 我 正在 为 这 本 书 
编写 注解 ， 尽 我 所 能 解答 关于 这 本 书 的 所 有 疑问 。 所 有 注解 都 将 以 开源 的 方 
式 发 布 到 http://book.cssmagic.net 网 站 ， 在 那里 你 还 可 以 与 我 以 及 万 干 读者 
交流 探讨 、 携 手 共 进 。 

此 外 ， 你 也 可 以 通过 微 信 与 我 联系 ， 请 关注 “CSS 魔法 ” 微 信 公众 号 。 

祝 阅 该 愉快 ! 














CSS 魔法 
2015 年 11 月 16 日 于 百姓 网 
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啊 ， 过 去 的 日 子 多 类 好 啊 ! 回想 上 个 世纪 ， 我 们 只 有 两 短文 持 CSS 的 
浏览 蔡 ， 而 且 它 们 所 实现 的 也 只 是 一 父 非 鱼 有 限 的 规范 的 一 个 非常 有 限 的 子 
集 ， 因 此 你 可 以 很 容易 地 在 自己 的 头脑 中 建立 一 幅 完 整 的 图 景 ， 标 记 出 什么 
好 用 、 什 么 不 好 用 。 这 幅 图 景 包含 各 个 浏览 瘟 实 现 中 的 各 种 bug， 因 为 这 些 
实现 其 实 存 在 着 不 少 的 错误 和 琉 忽 ， 有 些 地 方 甚至 错 得 离 详 。 唉 ， 有 些 bug 
还 涉及 非常 基础 的 层面 ， 以 致 于 各 浏览 融 的 布局 行为 完全 不 兼容 ， 这 迫使 我 
们 想 出 对 策 ， 反 过 来 利用 浏览 冀 目 身 的 解析 各 bug 来 变相 地 纠正 这 些 不 一 至 
的 行为 ! 

慢 春 。 过 去 那些 日 子 其 实 糟 透 了 。 所 入 它们 已 经 一 去 不 复 返 卫 ! 


就 在 最 近 这 几 年 ，CSS 领域 已 经 发 生 了 极 大 的 好 转 。( 绝 大 多 数 ) 浏览 
舱 已 经 在 兼容 性 上 逐渐 趋同 ， 它 们 不 兼容 的 地 方 几 乎 午 是 因为 茶 一 家 文 持 了 
某 个 特性 ， 而 另 一 家 还 没 文 持 一 这 比 两 家 都 文 持 但 效 末 不 一 样 要 蝇 多 了 。 
规范 不 仪 推动 了 兼容 性 的 进步 ， 还 增加 了 新 的 特性 ， 用 更 加 简洁 的 新 方法 取 
代 了 了 以 前 索 琐 的 技巧 。CSS 拥有 了 比 以 往 多 得 多 的 特性 、 强 得 多 的 能 力 ; 不 
过 我 们 都 知 志 ， 功 能 越 强 大 ， 复 杂 度 也 会 越 品 。 这 种 复杂 度 其 至 并 不 是 有 意 
为 之 : 当 你 把 足够 多 的 工作 部 件 组 合 到 一 起 之 后 ， 不 管 单 个 部 件 看 起 来 有 
多 人 简单， 这 个 组 合体 也 一 定 会 产生 有 趣 的 结果 。( 关 于 这 个 话题 的 更 多 内 容 ， 
请 看 《乐高 大 电影 》 ) 


正 是 由 于 在 无 意 之 中 产生 的 复杂 度 ，CSS 获得 了 种 种 我 们 从 未 期 望 或 
设计 过 的 神奇 特性 ， 不 断 带 给 我 们 惊喜 。 在 属性 与 属性 的 交错 之 间 ， 在 值 与 
值 的 混合 之 下 ， 有 很 多 秘密 有 竺 发现 。 你 可 以 通过 渐变 网 案 来 控 出 止 角 ， 让 
元 素 产 生动 画 ， 扩 大 可 点 击 区 域 ， 其 至 创建 饼 图 …… 如 今 ，CSS 已 经 拥有 了 
我 多 年 前 梦 释 以 求 的 强大 功能 ， 它 种 来 的 可 能 性 已 经 远 远 超越 了 我 当初 的 想 
像 。 很 多 我 原 以 为 绝 不 可 能 以 简洁 易 懂 的 方式 表达 出 来 的 功能 ， 现 在 也 已 成 



























































为 CSS 的 一 部 分 (比如 动画 )。CSS 已 经 进化 得 如 此 强大 ， 令 我 坚信 它 仍然 
有 很 多 的 秘密 等 待 我 们 去 发 现 一 一 或 许 某 天 你 也 会 有 所 斩获 。 


眼下 ， 很 多 炫 酶 的 技巧 已 经 被 世人 所 发 据 ， 但 极 少 有 人 能 像 Lea Verou 
那样 善于 探索 、 乐 于 分 享 。 从 她 的 博客 文 草 到 她 的 开源 贡献 ， 再 到 她 在 全 
球 各 地 所 做 的 生动 演讲 ，Lea 在 CSS 领域 已 经 建立 了 令 人 钦佩 的 知识 储备 。 
这 本 书 正 是 这 些 知 识 储 备 的 完美 升华 。 你 手 里 的 这 本 书 由 这 个 领域 内 最 顶 
尖 的 一 位 乔 者 精心 打造 ， 她 将 种 你 领略 CSS 所 能 达成 的 最 有 趣 、 最 神奇 、 
最 实用 的 技巧 。Lea 在 这 本 书 里 为 你 准备 的 内 容 将 令 你 感到 充实 、 愉 悦 、 甚 


加 前 种 ， 努 力 探索 ， 别 再 让 这 些 精 湛 的 技艺 沦 为 失传 的 秘密 ! 














一 一 Eric A. Meyer, 《CSS 权威 指南 》 作 者 
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在 过 去 的 几 年 里 ，CSS 经 历 了 一 场 巨 变 ， 正 如 JavaScript 在 2004 年 前 
后 所 经 历 的 那 场 昔 命 。 它 从 一 门 极 度 简单 、 功 能 有 限 的 样式 语言 ， 发 展 成 为 
一 项 由 80 多 项 W3C 规范 ( 含 草案 ) 所 定义 的 复杂 技术 ， 并 建立 起 了 独 有 
的 开发 者 生态 圈 、 专 属 的 技术 会 议 、 专 用 的 框架 和 工具 链 。CSS 已 经 如 此 
壮大 ， 以 致 于 一 个 普通 人 已 经 无 法 把 它 完 整地 装 进 自己 的 头脑 了 。 甚 至 在 
W3C 专门 定义 这 门 语言 的 工作 组 中 ， 也 没 人 敢 说 自己 是 精通 CSS 所 有 方面 
的 专家 ， 甚 至 连接 近 这 个 程度 都 非常 困难 。 实 际 上 ， 大 多 数 工作 组 成 员 只 专 
注 CSS 的 某 个 特定 细节 ， 可 能 对 其 他 部 分 知之 甚 少 。 


大 约 在 2009 年 之 前 ， 评 判 一 个 人 的 CSS 专业 程度 并 不 是 看 他 对 这 门 语 
言 的 了 解 有 多 深 。 对 当时 的 CSS 行业 来 说 ， 这 或 多 或 少 就 是 现实 : 一 个 人 
能 否 称 得 上 CSS 高 手 ， 往 往 要 看 他 能 记 住 多 少 个 浏览 右 bug 和 相应 的 对 策 。 
一 转眼 就 到 了 2015 年 ， 现 在 的 浏览 融 都 是 以 Web 标准 作为 设计 基准 的 ， 过 
去 那些 针对 特定 浏览 器 的 脆弱 hack 早已 风光 不 再 。 当 然 ， 某 些 不 兼容 的 情 
况 仍 然 无 法 避免 ， 但 是 迭代 速度 已 经 非常 之 快 〈 尤 其 是 因为 现在 的 浏览 器 几 
乎 都 已 经 实现 自动 更 新 了 )， 把 这 些 不 兼容 的 情况 记录 在 书 中 完全 是 在 浪费 
时 间 和 空间 。 


我 们 在 现代 CSS 中 所 面临 的 挑战 已 经 不 在 于 如 何 绕 过 这 些 转瞬 即 逝 的 
浏览 器 bug。 如 今 的 挑战 是 ， 在 保证 DRY YY、 可 维护 、 灵 活性 、 轻 量 级 并 且 
尽 可 能 符合 标准 的 前 提 下 ， 把 我 们 手中 的 这 些 CSS 特性 转化 为 网 页 中 的 各 
种 创意 。 这 正 是 这 本 书 将 要 呈现 的 内 容 。 





























Q) DRY 是 Don't Repeat Yourself 的 首 字母 缩写 ， 意 思 是 不 应 该 重复 你 已 经 做 过 的 事 。 它 是 一 种 
广 为 流 传 的 编程 理念 ， 旨 在 提升 代码 某 方面 的 可 维护 性 ， 在 改变 某 个 参数 时 ， 做 到 只 改 尽 量 
少 的 地 方 ， 最 好 是 一 处 。 强 调 CSS 代码 的 DRY 原则 是 一 个 贯穿 本 书 的 主题 。DRY 的 反面 
是 WET， 它 的 意思 是 We Enjoy Typing (我们 喜欢 散 键 盘 ) 或 Write Everything Twice( 同 样 
的 代码 写 两 次 )。 











市 面 上 有 很 多 书 ， 其 内 容 就 是 以 字母 顺序 记载 一 些 CSS 特性 。 你 手 里 
的 这 本 书 并 不 在 其 列 ， 这 可 能 是 好 事 也 可 能 是 坏事 。 本 书 的 目的 在 于 ， 在 你 
已 经 玖 悉 了 那些 参考 书 的 内 容 之 后 ， 帮 你 填补 知识 断档 。 它 会 让 你 接触 各 种 
全 新 的 方法 ， 充 分 发 挥 那 些 你 已 经 熟悉 的 特性 所 具备 的 无 穷 威力 ， 同 时 也 让 
你 明白 ， 某 些 你 不 熟悉 而 且 看 似 不 起 眼 的 CSS 特性 可 能 同样 威力 无 穷 、 不 
可 小 鹏 。 总 的 来 资 ， 本 书 最 核心 的 目的 是 教 你 如 何 用 CSS 解决 难题 。 


本 书 也 不 是 一 本 “ 药 谱 书 ”(cookbook)。 每 篇 “攻略 ”并 不 是 即 开 即 用 
的 菜谱 一 “死板 地 套用 某 些 步骤 就 可 以 达成 特定 的 效果 。 实 际 上 ， 我 努力 把 
每 个 技巧 背后 的 思考 都 尽量 细致 地 描述 出 来 ， 因 为 我 相信 理解 发 现 解决 方案 
的 过 程 比 解决 方案 本 身 更 有 用 。 即 使 你 认为 某 项 技巧 跟 你 的 工作 没有 直接 关 
联 ， 学 会 如 何 摸索 并 得 出 解决 方案 仍然 是 有 价值 的 ， 甚 至 可 以 帮 你 处 理 完全 
不 同 的 问题 。 长 话 短 说 ， 本 书 不 仅 授 人 以 “ 鱼 ”， 而 且 授 人 以 “ 渔 ” 让 你 一 
辈子 不 会 为 “ 没 鱼 吃 ”发 秋 。 




















致谢 


如 有 果 没 有 以 下 这 些 叶 人 的 帮助 和 支持 ， 这 本 书 不 可 能 成 形 ， 我 对 他 们 心 
存 感 激 。 热 烈 而 囊 心 地 感谢 你 们 。 


感谢 在 这 些 年 来 支 持 我 工作 的 人 们 。 没 有 你 们 ， 从 一 开始 我 就 不 可 
能 在 写 书 这 件 事 上 找到 上 自己 正确 的 位 置 。 感 谢 我 的 博客 (http://lea. 
veroume)、Twitter (http://twitter.com/leaverou) 以 及 其 他 地 方 的 该 
者 ， 更 要 感谢 亲爱 的 你 们 一 一 正在 阅读 我 首 本 书 的 谈 者 ! 感谢 所 有 
采用 我 的 开源 项 目 (https://github.conyleaverou) 的 人 们 ， 更 要 感谢 
那些 贡献 代码 的 人 。 

感谢 这 些 年 来 邀请 我 参加 各 种 讲座 和 论坛 的 会 议 组 织 者 。 尤 其 是 
Damian Wielgosik 和 Pawel Czerski， 是 你 们 最 早 信任 并 邀请 我 参 
加 2010 年 的 首届 Front-Trends 会 议 。 还 要 感谢 Vasilis Vassalos， 你 
在 2010 年 就 放手 让 我 为 雅典 经 济 贸易 大 学 设计 Web 开发 课程 ， 这 
段 经 历 让 我 对 教学 有 了 更 深 的 理解 (编写 一 本 技术 书本 质 上 就 是 一 
种 教学 )。 

感谢 CSS 工作 组 中 每 个 投票 同意 我 成 为 特 邀 专家 的 人 ， 这 件 事 从 根 
本 上 改变 了 我 对 于 Web 技术 的 理解 ， 尤 其 是 CSS。 

感谢 我 的 编辑 Mary Treseler 和 Meg Foley。 你 们 给 了 我 对 整个 过 程 
的 控制 权 ， 当 我 一 再 拖 稳 时 仍然 对 我 怀 有 难以 置信 的 耐心 (我 准时 
交 稿 的 情况 真 的 不 多 )。 

感谢 我 的 制作 编辑 Kara Ebrahim 。 在 本 书 使 用 的 PDF 泻 染 器 中 ， 你 
花费 了 大 量 时 间 来 修复 布局 问题 ， 并 且 通 过 不 断 的 手工 微调 来 克服 
CSS 泻 染 bug 和 功能 局 限 。 

感谢 我 的 技术 编辑 Elika Etemad、Tab Atkins、Ryan Seddon、Elisabeth 
Robson、Ben Henick、Robin Nixon 和 Hugo Giraudel。 你 们 不 仅 


























帮助 我 纠正 了 书稿 中 实际 存在 的 错误 ， 还 提供 了 非常 宝贵 的 反馈 ， 
帮助 我 把 枯燥 的 部 分 写 得 深入 浅 出 。 

是 感谢 Eric Meyer。 我 现在 仍然 难以 相信 ， 你 竟然 会 答应 为 我 的 书写 
推荐 序 。 

加 感谢 我 的 研究 顾问 David Karger。 当 我 到 达 麻 省 理工 学 院 时 ， 早 就 
应 该 写 完 这 本 书 了 ， 你 却 对 我 没有 完成 表示 了 理解 。 如 果 不 是 你 一 
直 以 来 的 宽容 大 度 ， 这 本 书 的 命运 可 能 会 完全 不 同 。 

国 感谢 我 的 父亲 Miltiades Komvoutis 在 很 早 就 教会 了 我 艺术 和 审美 。 
如 果 没 有 你 ， 我 很 可 能 根本 不 会 对 设计 和 CSS 感 兴趣 ， 而 这 本 书 可 
能 就 是 关于 另外 一 个 主题 了 ， 比 如 C++ 或 者 内 核 编 程 。 

是 感谢 我 的 筋 盟 Stratis Veros， 以 及 可 爱 的 筋 母 Maria Brere。 感 谢 你 
们 容忍 我 在 写 这 本 书 时 的 烦躁 情绪 。 同 样 也 感谢 你 们 的 孩子 Leonie 
和 Phoebe， 你 们 是 世上 最 可 爱 的 小 姑娘 :没有 你 们 ， 这 本 书 或 许 能 
是 一 个 月 完成 。 

加 感谢 我 已 故 的 母亲 Maria Verou， 并 将 本 书 献 给 你 。 在 我 们 共同 生活 
的 27 年 里 ， 你 是 我 最 好 的 朋友 和 最 大 的 支持 者 。 你 的 一 生 对 我 来 说 
就 是 巨大 的 歌舞 : 20 世纪 70 年 代 你 就 搬 到 地 球 男 一 边 的 秦 省 理工 
学 院 去 读 研 究 生 ， 并 以 优异 的 成 绩 取得 了 硕士 学 位 ， 而 在 那个 年 代 ， 
一 般 的 希腊 女性 几乎 不 可 能 考 进 大 学 。 你 教导 我 上 进 、 善 良 、 正 直 、 
独立 、 思 想 开 放 。 最 重要 的 是 ， 你 教会 了 我 如 何 笑 对 人 生 。 我 无 比 





























地 思念 着 你 。 
照片 的 幕后 功 蕊 


非常 感谢 那些 可 爱 的 摄影 师 们 慷慨 地 以 CC 协议 发 布 了 他 们 的 照片 。 如 
末 没 有 他 们 ， 怒 怕 本 书 中 每 个 示例 的 图 片 部 得 请 出 我 家 的 猫 号 了 不 过 有 些 
地 方 还 是 会 有 它 的 号 影 )。 下 面 列 出 了 我 使 用 的 CC 照片 及 其 来 源 。 


“House Made Sausage from Prairie Grass Cafe, Northbrook”, kurman 














Communications, Inc. 
http://www.flickr.com/kurmanphotos/7847424816 


“Cats that Webchick ls Herding”, Kathleen Murtagh 
http://www.flickr.com/ceardach/4549876293 


“ Stone Art”, Josef Stuefer 
http://www.flickr.com/josefstuefer/5982121 





“A Field of Tulips”, Roman Boed 
http:/www.flickr.com/romanboed/867231576 


“Resting in the Sunshine”, Steve Wilson 
http://www.flickr.com/pokerbrit/10780890983 


“Naxos lsland, Greece”, Chris Hutchison 
http:/www.flickr.com/employtheskinnyboy/3904743709 
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本 书 是 怎样 炼 成 的 


通俗 地 说 ， 这 本 书 在 技术 上 是 自 产 自 销 的 。 它 完全 用 HTML5 写成 ， 
并 用 到 了 一 些 由 O’Reilly 的 HTMLBook 标准 (http://oreillymedia.github.io/ 
HTMLBook) 定义 的 data- 属性 。 这 意味 着 你 在 这 本 书 里 看 到 的 每 样 东西 
(包括 布局 、 图 片 、 颜 色 等 ) 都 是 由 CSS 泻 染 出 的 HTML。 大 量 图 片 是 由 
SVG 生成 的 ， 或 者 是 由 SCSS 因数 生成 的 SVG data URI。 书 中 为 数 不 多 的 数 
学 公式 是 在 LaTeX 中 写成 的 ， 然 后 转换 成 MathML。 有 一 点 可 能 会 让 你 意 想 
不 到 ， 书 中 的 所 有 页 人 码 、 章 市 号 、 攻 略 编号 都 是 由 纯粹 的 CSS 计数 器 生成 的 。 


目前 OReilly 出 版 的 绝 大 多 数 图 书 都 是 以 这 种 方式 制作 出 来 的 。 
O’Reilly 专门 为 这 件 事 搭 建 了 一 个 叫 作 Atlas (http://atlas.oreilly.com〉 的 系 
统 。Atlas 最 美好 的 地 方 在 于 ， 它 并 不 只 是 供 O'Reilly 官方 专用 的 ， 对 公众 
也 开放 。 


不 过 这 本 书 并 不 能 算是 Atlas 的 典型 案例 。 实 际 上 ， 在 将 CSS 用 于 书 
籍 排 印 这 件 事 上 ， 这 本 书 将 这 种 可 能 性 推 到 了 极致 一 一 据 我 所 知 ， 还 没有 其 
他 书 做 到 这 个 程度 。 它 帮助 我 们 发 现 了 Atlas 和 Antenna House (Atlas 采用 
的 PDF 尝 当 器) 中 的 许多 bug; 甚至 CSS 规范 自身 也 有 很 多 与 排 印 有 关 的 
问题 暴露 出 来 ， 我 将 这 些 问题 都 递交 给 了 CSS 工作 组 。 
你 可 能 会 问 :“ 使 用 Web 技术 来 打造 这 样 一 本 书 究 竟 要 人 花费 多 少 代 
码 ? ”让 我 们 来 看 一 些 〈 正 式 出 版 前 的 ) 统计 数据 。 
加 这 本 书 的 样式 动用 了 4700 行 SCSS 代码 ， 编 译 成 CSS 后 有 3800 行 。 
国 大 约 10 000 行 出 头 的 HIML 代码 。 
加 在 整 本 书 用 到 了 322 张 插 图 ， 但 只 有 140 张 是 图 片 文 件 (包括 SVG 图 
片 和 屏幕 截图 )， 绝 大 多 数 插图 都 只 是 一 系列 加 了 CSS 样式 的 div 标签 
而 已 。( 这 些 用 于 插图 的 样式 占 到 全 书 CSS 和 SCSS 代码 量 的 65% ! ) 











下 面 列 出 了 除了 Atlas 之 外 ) 制作 本 书 所 用 到 的 工具 。 


Git 用 于 版 本 控制 。 
SCSS 用 于 CSS 预 处 理 。 


整 本 书 都 是 在 Espresso 〈http:/macrabbit.comyespresso) 这 蒜 文 本 编 
辑 硕 中 写成 的 。 











图 CodeKit 用 于 把 SCSS 编译 成 CSS。 
四 Dabblet (http:/dabbletcom) 用 于 存放 在 线 演 示 ， 有 一 部 分 插图 规 取 


日 这 些 在 线 演示 页 面 。 

那些 SVG 格式 的 插图 并 不 是 手工 写成 的 ， 而 是 在 Adobe Tllustrator 
中 创建 的 。 

在 必要 时 用 到 了 Adobe Photoshop 来 处 理 屏 幕 截图 。 











本 书 是 在 一 台 13 英寸 的 MacBook Air 上 写成 的 ， 它 在 写作 过 程 中 随 我 到 








了 很 多 国家 ， 包 括 和 希腊 、 肯 尼 亚 、 澳 大 利 亚 、 新 西 兰 、 菲 律 侍 、 新 加 坡 、 镶 
利 、 巴 西 、 美 国 、 法 国 、 西 班 牙 、 英 国 、 威 尔 士 、 波 兰 、 加 拿 大 和 奥地利 。 








关于 本 书 





这 本 书 适 合 谁 


这 本 书 的 主要 目标 读者 是 正在 由 中 级 向 高 级 进 阶 的 CSS 开发 者 。 我 们 
将 跳 过 基础 入 门 部 分 ， 直 接 探 索 现 代 CSS 特性 所 针对 的 更 局 级 的 应 用 场景 ， 
并 将 它们 融会 贯通 。 不 过 在 此 之 前 ， 杀 爱 的 读者 朋友 ， 我 假设 你 已 经 具备 了 
下 人 人 

















假设 你 已 经 彻底 掌握 了 CSS 2.1， 并 有 数 年 的 实践 经 验 。 你 不 需要 
费劲 地 猜测 定位 的 原理 是 什么 。 在 增强 网 页 设计 效果 时 ， 你 会 使 用 
生成 性 内 容 ， 而 不 是 依赖 宛 余 的 标签 和 图 片 。 你 不 会 在 代码 中 到 处 
使 用 !important 来 打 补 丁 ， 因 为 你 已 经 深入 理解 了 选择 符 优先 级 、 
继承 和 层 著 机 制 。 你 知道 盒 模 型 中 的 各 个 部 分 都 是 什么 ， 而 且 不 会 
为 外 边 距 重 且 头疼 不 已 。 你 对 各 种 长 度 单位 了 如 指 掌 ， 而 且 清 楚 它 
们 分 别 应 该 用 在 什么 地 方 。 

你 已 经 在 书 里 或 在 网 上 了 解 过 最 流行 的 CSS3 特性 都 有 哪些 ， 并 且 
已 经 亲手 尝试 过 一 一 哪怕 只 是 在 目 己 的 小 项 目 里 。 即 使 还 没有 深入 
地 人 研究 过 它们 ， 你 也 已 经 知道 如 何 生 成 圆 角 、 加 上 投影 或 生成 一 个 
线性 渐变 图 案 。 你 玩 过 基本 的 2D 变形 (transform)， 并 通过 简单 的 
过 渡 和 动画 来 增强 交互 体验 。 




















图 你 知道 SVG， 以 及 它 的 用 途 ， 即 使 你 还 不 太 清楚 自己 应 该 怎么 写 。 
加 你 可 以 读 懂 简单 的 、 原 生 的 JavaScript 代码 ， 比 如 创建 元 素 ， 操 作 





它们 的 属性 ， 把 它们 次 加 进 文档 ， 等 等 。 
你 听 资 过 CSS 预 处 理 器 ， 并 且 知 道 它 们 可 以 做 什么 ， 即 使 你 决定 一 
个 也 不 用 。 


可 高 一 数学 应 该 难 不 倒 你 ， 比 如 平方 根 、 勾 股 定理 、 三 角 涵 数 、 对 
数 等 。 
尽管 如 此 ， 为 了 让 不 完全 符合 上 述 条 件 的 读者 也 可 以 愉快 地 阅读 本 书 ， 
在 每 篇 攻略 的 开头 ， 我 午 会 准备 一 个 “背景 知识 ”提示 框 ， 倘 要 地 列 出 该 昼 
当前 攻略 所 必需 的 CSS 知识 以 及 前 面相 关 的 攻略 (不 过 CSS 2.1 的 内 容 就 不 
列 出 了 ， 否 则 这 个 提示 框 会 择 炮 的 )。 这 个 提示 人 框 如 下 所 未 : 





box-shadow， 基 本 的 CSS 渐变 ,“ 自 适应 的 椭圆 ” 








这 样 一 来 ， 哪 人 你 暂时 还 没有 和 苔 握 这 些 基 础 知识 ， 也 可 以 在 补 好 诛 之 后 
再 回来 阅读 。 只 要 你 具备 了 某 篇 攻略 所 要 求 的 背景 知识 ， 就 可 以 直接 学 习 它 
了 ， 不 用 在 乎 顺序 。 不 过 ， 还 是 建议 你 按照 书 中 的 顺序 来 阅读 ， 因 为 我 花 了 
很 多 心思 才 把 这 些 革 市 调整 到 最 住 顺序 。 


请 注意 ， 上 面 列 出 的 条 件 中 写 明 的 是 “CSS 开发 者 ” 并 没有 要 求 任 
何 “设计 能 力 ” 一 定 要 意识 到 这 并 不 是 一 本 关于 设计 的 书 。 虽 然 我 们 会 不 
可 避免 地 涉及 一 定 的 设计 原理 ， 阐 述 一 些 用 户 体 验 的 改进 方式 ， 但 这 本 书 的 
初衷 和 核心 价值 是 帮助 你 用 代码 解决 问题 。CSS 会 产后 视觉 上 的 输出 结 
但 它 仍然 是 代码 ， 就 好 比 SVG、WebGL/OpenGL 或 JavaScript 里 的 Canvas 
API 一 一 它们 都 是 代码 ， 而 不 是 设计 。 编 程 要 求 我 们 具备 条 理性 的 思维 ， 想 
要 写 出 合理 的 、 灵 活 的 CSS 代码 同样 如 此 。 如 今 ， 绝 大 多 数 CSS 开发 者 都 
在 使 用 CSS 预 处 理 硕 ， 他 们 会 用 到 变量 、 数 学 计算 、 条 件 判 新 和 循环 ， 
此 写 CSS 看 起 来 已 经 像 是 在 编程 了 。 


这 并 不 是 说 不 喜 励 设计 师 们 读 这 本 书 。 只 要 具备 足够 的 CSS 编写 经 验 ， 
任何 人 部 可 以 从 本 书 中 受益 ; 而 且 有 很 多 才华 模 淤 的 设计 师 可 以 写 出 非常 出 
色 的 CSS 代码 。 总 之 ， 布 望 大 家 可 以 明白 ， 本 书 的 目标 并 不 是 教 大 家 如 何 
改进 网 站 的 视 党 设计 或 可 用 性 ， 即 使 它 在 这 些 方面 会 起 到 间接 的 帮助 。 


本 书 的 格式 和 约定 


这 本 书包 含 了 47 篇 攻略 ， 并 根据 主题 的 不 同 收 入 了 7 章 之 中 。 这 些 攻略 
基本 上 是 相互 独立 的 ， 并 且 可 以 按照 任意 顺序 阅读 一 只 要 你 营 握 了 各 篇 攻 
略 所 需 的 背景 知识 。 在 每 篇 攻略 中 出 现 的 演示 案例 并 不 是 完整 的 网 站 ， 甚 
至 连 网 站 的 片断 都 算 不 上 。 这 些 案例 有 意 设 计 得 尽量 简短， 以 便 降低 理解 负 
担 。 这 本 书 的 目的 并 不 是 要 给 出 设计 创意 ， 而 是 给 出 创意 的 实现 方案 。 


每 篇 攻略 分 为 两 个 或 多 个 部 分 。 第 一 部 分 叫 作 “难题 ”， 会 引入 一 项 第 
见 的 CSS 挑战 ， 需 要 我 们 去 解决 。 这 个 部 分 有 时 会 列 出 一 些 广泛 流行 但 不 
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P-1 
这 是 一 个 插图 的 示例 。 图 中 是 伟 
大 的 Sir Adam Catlace 
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这 是 一 个 警告 。 它 的 作用 
告 你 ( 要 做 好 心理 准备 哦 )， 
:指出 一 些 常 见 的 误区 ， 或 提 
:哪些 地 方 容易 出 错 。 


下 
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辆 半 了 i 
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够 完美 的 解决 方 条 〈 比 如， 需要 添加 大 量 的 结构 标记 ， 需 要死 写 数值 ， 等 
等 )， 而 且 往往 会 以 类 似 “ 还 有 更 好 的 方法 吗 ” 这 样 的 问题 作为 结尾 。 


在 引入 问题 之 后 ， 会 给 出 一 个 或 多 个 解决 方案 。 本 书 的 灵感 来 源 于 我 在 
各 种 技术 会 议 上 的 CSS 演讲 ， 因 此 我 尝试 在 书 中 尽 可 能 保持 那 种 互动 式 的 
风格 。 每 种 解决 方 采 部 会 配 以 多 幅 插 图 ， 把 每 个 能 产生 视觉 变化 的 步 又 都 用 
图 片 演示 出 来 。 由 于 所 有 插图 不 一 定 都 能 紧 贴 着 对 应 的 段落 ， 我 给 它们 编 上 
本 写 ， 这 样 就 可 以 在 正文 中 引用 这 些 插图 。 你 可 以 在 图 P-1 看 到 一 个 插图 的 
示例 ， 而 且 这 名 话 本 里 也 是 一 个 引用 插图 的 示例 。 


行内 代码 采用 等 宽 字 体 来 表示 ， 颜 色 值 也 是 如 此 。 颜 色 值 前 面 通常 还 会 
加 一 个 小 的 预览 色 块 〈 比 如 国 #fe6)。 代 码 块 是 这 样 的 : 











background: url("adamcatlace.jpg"); 


或 这 样 的 : 
<figure> 
<img src="adamcatlace.jpg" /> 
<figcaption>Sir Adam Catlace</figcaption> 
</figure> 





你 可 能 已 经 看 出 来 了 只 有 当代 码 块 的 语言 不 是 CSS 时 ， 语 言 类 型 才 会 在 
右上 和 角 标 记 出 来 。 同 样 ， 为 简洁 起 见 ， 当 示例 代码 只 涉及 单个 元 系 、 不 涉及 
伪 类 或 伪 元 系 时 ， 通 党 就 不 再 把 选择 从 和 花 括 写 写 出 来 了 。 

本 书 中 的 所 有 JavaScript 示例 都 是 原生 的 JavaScript， 不 需要 依赖 任 
何 类 库 或 框架 。 我 们 只 会 用 到 一 个 工具 孔 数 一 一 $$()。 它 可 以 让 我 们 更 容 
易 地 获取 和 遍历 所 有 匹配 特定 CSS 选择 符 的 DOM 元 系 。 这 个 函数 的 定 
义 如 下 : 











function $$(selector, context) { 
context = context || document; 
Var elements = context.querySelectorAll(selector); 
return Array.prototype.slice.call(elements); 


书页 底部 的 “小 花絮 ” 段 沙 会 扯 得 稍微 远 一 些 ， 比 如 介绍 过 个 CSS 特性 硝 后 历史 性 的 或 技术 性 的 趣闻 。 
它们 对 使 用 和 理解 正文 内 容 没 有 直接 作用 ， 但 读者 或 许 会 在 这 里 发 现 他 们 感 兴 趣 的 东西 。 


EE 








每 篇 攻略 至 少 会 附 上 一 个 在 线 示例 ，URL 都 在 play.csssecrets.io 域名 
下 ， 而 且 都 很 简短 易 记 。 这 些 在 线 示 例 的 链接 是 这 样 展示 的 : 


play.csssecrets.io/polka 


强烈 建议 你 打开 这 些 “ 试 一 试 ” 示 例 ， 尤 其 是 当 你 对 文中 所 述 的 技巧 不 
那么 清楚 时 ， 或 者 当 你 在 读 到 某 个 地 方 卡 住 了 的 时 候 。 

该 表扬 就 表扬 : 当 文 中 提 到 的 技巧 是 某 人 在 社区 中 首次 提出 时 ， 我 们 都 
会 在 类 似 本 段 这 样 的 “ 致 数 ”环节 向 他 发 出 谢意 ， 同 时 也 会 给 出 相关 链接 。 
如 果 把 这 些 链接 都 放 在 全 书 末 尾 的 “参考 资料 ”中 ， 查 起 来 会 很 不 方便 ， 因 
此 我 们 将 采用 就 近 注 解 的 方式 。 致 化 

在 每 篇 攻略 的 末尾 ， 你 还 会 发 现 一 份 相 关 规 范 的 清单 ， 就 像 下 面 这 样 : 














这 份 清单 列 出 了 当前 攻略 所 述 技术 所 对 应 的 各 项 技术 规范 。 不 过 ， 跟 前 
面 提 到 的 “背景 知识 ”提示 框 一 样 ， 这 份 清单 也 不 再 列 出 CSS 2.1 (http:// 
w3.org/TR/CSS21) 的 内 容 。 这 意味 大 ， 少 数 几 篇 只 讨论 CSS 2.1 的 攻略 就 根 
本 没有 “相关 规范 ”这 个 段落 。 





EI 
但 在 编写 本 书 时 可 能 还 没有 浏览 器 实现 。 你 在 阅读 本 书 的 时 候 ， 别 忘 了 再 次 查证 这 些 特性 是 否 已 经 可 用 ， 
因为 当 本 书 出 版 后 ， 浏 览 器 可 能 已 经 实现 了 。 考 虑 到 这 些 特性 的 草案 可 能 还 很 不 稳定 ， 浏 览 器 兼容 性 查询 
网 站 可 能 还 没有 包含 它们 ， 因 此 这 个 段 沙 同 样 也 会 提供 一 个 测试 性 的 示例 页 面 ， 以 便 谍 者 自行 得 验 。 这 些 
测试 页 面 的 URL 同样 也 很 简短 易 记 ， 会 以 下 面 这 样 “ 测 一 测 ” 的 形式 标注 出 来 。 这 些 测 试 通 音 是 这 样 设 
计 的 一 一 绿色 阴影 表示 当前 浏览 器 已 经 支持 菏 个 特性 ， 而 红色 阴影 反之 。 在 测试 代码 的 注释 中 ， 也 提供 了 
明确 的 说 明 。 


测 一 测 和 EN dwr ed wa :GUEST 








浏 秽 垦 文 持 与 回 退 机 制 


本 书 的 最 大 创举 可 能 驶 是 完全 不 提供 浏览 如 兼容 性 表格 。 这 是 一 个 经 过 
深思 兄 虑 的 决定 ， 因 为 以 当前 浏览 硕 的 更 新 速度 来 看 ， 这 些 信 息 必 定 在 书 还 
没有 上 和 架 时 就 已 经 过 时 了 。 我 认为 ， 不 准确 的 浏览 器 支持 信息 极 具 误 导 性 ， 
还 不 如 干脆 没有 。 

尽管 如 此 ， 书 中 大 多 数 攻 略 要 么 已 经 在 浏览 带 中 获得 了 良好 的 文 持 ， 要 
么 可 以 做 到 平稳 退化 。 万 一 菏 项 技术 在 目前 的 支持 程度 下 特别 不 理想 ， 我 会 
在 相关 段落 处 设置 一 个 “不 完全 文 持 ” 的 警告 图 标 ， 比 如 本 段 劳 边 就 有 一 个 
示例 。 它 应 该 足以 提醒 你 在 正式 使 用 这 些 撤 术 之 前 不 要 二 了 查证 一 下 浏览 大 
的 支持 情况 ， 并 且 要 特别 注意 做 好 回 退 机 制 。 

有 很 多 优秀 的 网 站 提供 了 及 时 有 效 的 浏览 融 兼 容 性 信息 。 推 荐 如 下 : 


Can I Use...? (http://caniuse.com) 




















WebPlatform.org (http://webplatform.org) 

Mozilla Developer Network (http://developer.mozilla.org) 

维基 百科 上 的 “浏览 硕 排 版 引擎 对 比 《〈CSS 兼容 性 )” 词 条 (http:// 
en.wikipedia.org/wiki/Comparison of layout engines (Cascading 
Style Sheets)) 


有 时 候 你 可 能 会 发 现 某 个 特性 已 经 得 到 浏览 器 支持 了 ， 但 不 同 浏览 器 的 
表现 可 能 还 有 着 细微 的 差异 。 比 如 说 ， 它 可 能 需要 一 个 浏览 器 前 缀 “， 或 者 
在 语法 上 存在 细微 的 差别 。 我 们 的 示例 代码 中 只 会 包含 符合 标准 的 、 无 前 绥 
的 语法 。 不 过 在 绝 大 多 数 情 况 下 ， 你 都 可 以 同时 使 用 各 种 不 同 的 语法 ， 并 且 
通过 层 佬 机制 来 确保 哪 条 声明 最 终生 效 。 出 于 这 个 原因 ， 你 应 该 把 标准 语法 
排 在 最 后 。 举 例 来 说 ， 要 得 到 一 条 从 黄色 到 红色 的 垂直 渐变 色 ， 本 书 只 会 列 
出 标准 语法 : 











background: linear-gradient(96deg, yellow, red); 


但 是 如 果 你 想 要 支持 那些 较 早 的 浏览 器 ， 可 能 得 把 代码 写成 这 样 才 能 
奏效 ; 


background: -moz-linear-gradient(@deg, yellow, red); 
background: -o-linear-gradient(6@deg, yellow, red); 
background: -webkit-linear-gradient(@deg, yellow, red); 
background: linear-gradient(96deg, yellow, red); 





这 种 差异 的 局 面 跟 浏览 融 兼 容 性 的 局 面 一 样 ， 时 刻 处 在 变化 之 中 。 因 
此 ， 当 你 在 使 用 某 项 CSS 特性 之 前 ， 不 要 环 记 这 方面 也 是 你 要 做 好 的 功 读 ， 








QD 关于 浏览 如 前 级 的 更 多 信息 ， 比 如 它们 为 什么 会 存在 ， 以 及 如 何在 代码 中 把 它们 抽象 出 来 ， 
你 可 以 在 “ 冰 与 火 之 歌 : 浏览 絮 前 级 ”一 市 中 进一步 了 解 。 





本 书 就 不 再 为 此 花费 过 多 篇 幅 了 。 


还 有 一 些 内 容 我 们 也 不 再 费 述 。 提 供 回 退 机 制 通 稼 是 一 种 很 好 的 做 
法 ， 这 样 可 以 确保 你 的 网 站 不 会 在 低 版 本 浏览 剖 中 挂 挥 ， 只 是 看 起 来 没有 
那么 炫 而 已 。 当 这 些 后 备 机 制 很 明显 的 时 候 ， 我 们 就 不 展开 讨论 了 了 ， 因 为 
你 应 该 已 经 很 清楚 样式 声明 的 层 屋 机 制 了 。 举 例 来 说 ， 当 我 们 像 上 面 那 样 
指定 一 个 渐变 色 作 为 背景 的 时 候 ， 应 该 在 前 面 添加 一 行 实 色 育 景 的 声明 。 
添加 实 色 的 一 个 好 方法 是 取 渐 变色 的 平均 色 值 (比如 在 这 个 例子 中 是 国 
rgb(255，128，6) )。 























background: rgb(255，128，6) ; 

background: -moz-linear-gradient(@deg, yellow, red); 
background: -o-linear-gradient(@deg, yellow, red); 
background: -webkit-linear-gradient(@deg, yellow, red); 
background: linear-gradient(96deg, yellow, red); 











不 过 ， 有 些 时 候 不 太 可 能 只 通过 样式 的 层 闭 就 提供 完善 的 回 退 样式 。 这 
时 别 忘 了 你 还 有 一 招 ， 可 以 使 用 Modernizr (http://modernizr.com/) 这 样 
的 工具 来 给 根 元 系 (<html>) 添加 一 些 辅助 类 ， 比 如 textshadow 或 no- 
textshadow 和 等。 这样 你 束 可 以 针对 支持 或 不 支持 某 些 特性 的 浏览 器 来 分 别 
编写 样式 了， 就 像 这 样 : 





h1 { color: gray; } 


.textshadow hl { 
color: transparent ; 
text-shadow: 6 86 .3em gray ; 


上 





如 有 果 你 想 尝 试 使 用 的 某 个 CSS 特性 非 第 新 ， 还 可 以 试 试 用 @supports 
规则 来 实现 回 退 ， 可 以 将 其 视 作 浏览 硕 “ 原 生 ” 的 Modernizr。 比 如 说 ， 上 
面 的 代码 还 可 以 这 样 写 : 





h1 { color: gray; } 


@supports (text-shadow: 6 6 .3em gray) { 
hi { 
color: transparent; 
text-shadow: 6 6 .3em gray; 


} 


但 在 眼下 ， 还 必须 慎 用 @supports。 在 上 面 的 例子 中 ， 我 们 想 要 的 文本 
投影 效果 只 会 在 那些 支持 text-shadow 且 同 时 支持 @supports 规则 的 浏览 
妖 中 和 后 驳 。 这 个 范围 明显 比 我 们 所 期 望 的 要 罕 。 

最 后 ， 同 样 值得 一 提 的 是 ， 即 使 你 不 打算 使 用 Modernizr， 也 可 以 目 己 
写 一 人 小段 JavaScript 代码 来 实现 相同 的 功能 一 一 做 一 些 特性 检测 然后 给 根 元 
系 加 一 些 辅助 类 。 如 果 要 检测 某 个 样式 属性 是 否 被 文 持 ， 核 心思 路 就 是 在 任 

















一 元 紊 的 element .style 对 象 上 检查 该 属性 是 否 存 在 : 


var root = document.documentElement; // <html> 


if ('textShadow' in root.style) { 
root.classList.add('textshadow' ); 


else { 
root.classList.add('no-textshadow' ); 
} 


如 果 我 们 需要 检测 多 个 属性 ， 也 可 以 很 容易 地 把 上 述 代 码 改 造成 一 个 


function testPproperty(property) { 
Var root = document.documentElement; 


if (property in root.style) { 
root.classList.add(property.toLowerCase()); 
return true; 


) 


root.classList.add('no-' + property.toLowerCase( ) ) ; 
return false; 





如 于 我 们 想 要 检测 某 个 具体 的 属性 值 是 否 文 持 ， 那 就 再 要 把 它 赋 给 对 应 
的 属性 ， 然 后 再 检查 浏览 般 是 不 是 还 保存 春 这 个 值 。 很 显然 ， 这 个 过 程 会 改 
变 元 素 的 样式 ， 因 此 我 们 需要 一 个 隐藏 元 系 : 











var dummy = document.createElement('p'); 
dummy .style.backgroundImage = 'linear-gradient(red,tan)'; 


if (dummy.style.backgroundImage) { 
root.classList.add('lineargradients'); 


} 

else { 
root.classList.add('no-lineargradients'); 

} 


这 段 代码 同样 也 可 以 被 很 容易 地 改造 成 一 个 函数 : 


function testValue(id, value, property) { 
var dummy = document.createElement('p'); 
dummy .style[property|] = value; 


if (dummy.style[property]) { 
root.classList.add(id); 
return true; 


) 


root.classList.add('no-' + id)， 
return false; 


如 末 要 检测 选择 符 和 @ 规 则 的 文 持 情况 ， 则 会 稍稍 复杂 一 些 。 不 过 原 
理 也 很 简单 ， 在 解析 CSS 代码 时 ， 浏 览 妖 总 会 丢弃 它 日 己 无 法 识别 的 部 分 ， 
因此 我 们 可 以 动态 地 应 用 样式 并 检查 它 是 否 生 效 ， 以 此 来 判断 浏览 需 是 否 可 
以 识别 某 个 特性 。 当 然 ， 我 们 也 要 清楚 地 认识 到 ， 浏 览 妖 可 以 解析 某 个 CSS 
特性 并 不 代表 它 已 经 实现 (或 正确 实现 ) 了 这 个 特性 。 











1-1 
“标准 就 像 香 肠 ， 最 好 别 去 看 它们 
是 怎么 做 出 来 的 。 





某 位 匿名 的 W3C 工作 组 成 员 





图 1-2 

CSS 工作 组 的 人 员 结构 
会 员 公司 

国 二 这 志 守 

国 wasc 工人 人员 


Web 标准 : 是 敌 还 是 友 


标准 的 制定 过 程 


与 大 众 的 理解 大 相 径 庭 的 是 ，W3C 并 不 “生产 ”标准 。 实 际 上 ， 它 扮 
演 的 是 一 个 论坛 的 角色 : W3C 以 工作 组 的 方式 ， 把 有 茶 项 技术 的 相关 各 方 聚 
集 起 来 ， 最 终 由 他 们 来 产 出 标准 。 当 然 ，W3C 并 不 只 是 一 个 观察 者 : 它 设 
定 了 整个 平台 的 规则 ， 监 督 整个 进程 。 但 这 些 技术 规范 (基本 上 ) 并 不 是 由 
W3C 的 工作 人 员 编 写 完 成 的 。 


CSS 规范 通常 是 由 CSS 工作 组 的 成 员 来 编写 的 。 在 编写 本 书 时 ，CSS 
工作 组 共有 98 名 成 员 ， 人 员 结 构 如 下 : 


国 86 名 来 自 W3C 会 员 公司 的 成 员 (88%) 
国 7 名 特 邀 专家 笔者 有 和 幸 在 列 ) (7%) 
加 5 名 W3C 工 作 人 员 (5%) 


你 可 能 注音 到了， 工作 组 的 绝 大 多 数 成 员 (88%) 来 目 W3C 会 员 公司 。 
这 些 公司 (比如 浏览 器 厂商 、 主 流 网 站 、 人 研究 机 构 、 常 规 技术 公司 等 ) 都 是 
Web 标准 兴旺 发 展 的 下 接受 益 者 。 它 们 每 年 的 会 费 也 是 W3C 的 主要 资金 来 
源 ， 使 得 W3C 能 够 免费 、 开 放 地 发 布 所 有 技术 规范 ， 而 不 像 其 他 标准 制定 
组 织 那样 不 得 不 采取 收费 政策 来 维持 运作 。 


特 邀 专家 是 指 那些 被 邀请 参与 标准 制定 的 Web 开发 者 。 在 真正 获得 这 
样 的 殊荣 之 前 ， 他 们 需要 证 明 自 己 在 解决 难题 时 能 够 持续 不 断 地 投入 ， 在 参 
与 讨论 时 能 够 体现 出 深厚 的 技术 背景 。 
最 后 ， 同 样 不 可 忽视 的 是 W3C 工作 人 员 。 他 们 才 是 真正 在 W3C 内 工 
作 的 人 ， 他 们 为 工作 组 和 W3C 之 间 的 交流 提供 便利 。 
Web 开发 者 们 普遍 存在 一 个 误解 ， 以 为 W3C 手 握 标准 、 号 令 天 下 ， 而 
可 怜 的 浏览 器 厂商 们 则 唯 唯 庄 话 、 英 敢 不 从 。 这 显然 不 是 真相 :; 对 于 哪些 东 
西 该 进入 标准 ， 浏 览 右 厂商 比 W3C 有 更 多 的 发 言 权 ， 上 面 列 出 的 人 员 结 构 
已 经 证 明了 这 一 点 。 
同样 跟 大 众 观念 截然 相反 的 是 ， 制 定 标准 并 不 是 闭门造车 。CSS 工作 组 
坚持 透明 原则 ， 它 内 部 所 有 的 交流 都 是 公开 的 ， 并 邀请 公众 的 关注 和 参与 。 
加 绝 大 多 数 的 讨论 都 发 生 在 工作 组 的 邮件 列表 中 : www-style (http:// 
lists.w3.org/Archives/Public/www-style)。 这 个 邮件 列表 是 公开 存档 
的 ， 欢 迎 任何 人 的 参与 。 


国 每 周 都 会 召开 一 次 电话 会 议 ， 时 长 一 小 时 。 该 会 议 并 不 向 非 工作 
































组 成 员 开 放 ， 但 它 会 被 实时 记录 在 W3C 的 IRC 服务 器 (http://irc. 
w3.org/) 上 的 热 ss 频道 。 这 些 会 议 记录 会 在 几 天 内 整理 出 来 ， 并 发 
布 到 邮件 列表 中 。 

国 还 有 每 季度 一 次 的 面对面 会 议 ， 也 会 以 上 述 方式 进行 会 议 记录 。 在 
获得 工作 组 主席 的 许可 之 后 ， 这 类 会 议 也 通常 会 对 观察 员 开 放 (以 
旁听 的 方式 )。 

所 有 这 些 都 是 W3C 进程 的 一 部 分 ， 任 何 决 定 都 是 通过 这 样 的 方式 来 产 
生 的 2”。 此 外 ， 那 些 真 正 负 责 把 这 些 决 定 写成 文字 《〈 即 编撰 规范 ) 的 人 叫 作 
规范 编辑 。 规 范 编辑 可 能 是 W3C 的 工作 人 人员、 浏览 套 开 发 者 、 相 关 专 业 的 
特 邀 专家 ; 也 可 能 是 会 员 公 司 的 雇员 ， 他 们 全 职 从 事 此 工作 ， 为 了 共同 利益 
去 推进 标准 。 

每 项 规范 从 最 初 局 动 到 最 终 成 熟 ， 都 会 经 过 以 下 阶段 。 


(1) 编辑 草案 (ED) : 这 是 一 项 规范 的 初始 阶段 ， 可 能 非常 粗糙 ， 就 像 
是 编辑 们 想法 的 大 杂烩 。 对 这 个 阶段 没有 什么 要 求 ， 也 不 保证 它 会 被 工作 组 
批准 。 但 它 也 是 各 个 修订 版 本 的 必 经 阶段 ， 每 次 变更 都 是 先 从 一 个 ED 中 产 
生 的 ， 然 后 才 会 发 布 出 来 。 

(2) 首 个 公开 工作 草案 ‘FPWD) : 一 项 规范 的 首 个 公开 发 布 版 本 ， 它 应 
该 准备 就 绪 ， 以 接受 工作 组 的 公开 反 锯 。 

(3) 工作 草案 (WD) : 在 第 一 个 WD 之 后 ， 还 会 有 更 多 的 WD 出 来 。 
这 些 WD 会 吸收 来 自 工 作 组 和 更 广阔 的 社区 的 反 饶 ， 一 版 接着 一 版 小 幅 改 
进 。 浏 览 絮 的 早期 实现 通常 是 从 这 个 阶段 开始 的 ， 厂 商 基 本 不 太 可 能 对 更 早 
阶段 的 草 生 提供 实验 性 的 支持 。 

(4) 候选 推荐 规范 (CR) : 这 可 以 认为 是 一 个 相对 稳定 的 版 本 。 此 时 比 
较 适 合 实现 和 测试 。 一 项 规范 只 有 有 具备 一 套 完 整 的 测试 套件 和 两 个 独立 的 实 
现 之 后 ， 才 有 可 能 继续 推进 到 下 一 阶段 。 

(5) 提名 推荐 规范 (PR) : 这 是 W3C 会 员 公 司 对 这 项 规范 表达 反对 意 
见 的 最 后 机 会 。 实 际 上 他 们 很 少 在 这 个 阶段 提出 异议 ， 因 此 每 个 PR 推进 到 
下 一 阶段 〈 也 是 最 后 一 个 阶段 ) 只 是 时 间 问 题 。 

(6) 正式 推荐 规范 (REC) : 一 项 W3C 技术 规范 的 最 终 阶 段 。 


工作 组 中 会 有 一 到 两 位 成 员 担 任 主席 的 角色 。 主 席 负 责 组 织 会 议 、 协 调 
讨论 、 控 制 时 间 ， 而 且 要 从 大 局 上 恰 旋 整 件 事 情 。 担 任 主席 是 一 件 耗 时 必 神 
的 工作 ， 经 稼 被 比 作 养 一 大 群 猫 。 当 然 ， 所 有 接触 过 这 项 工作 的 人 都 知道 这 
个 比喻 并 不 恰当 一 一 养 猫 比 这 要 容 多 多 了 。 















































QD 想 了 解 更 多 这 方面 的 信息 ?” Elika Etemad (网 名 fantasai) 写 了 一 系列 关于 CSS 工作 组 如 何 
运作 的 文章 (http://fantasai.inkedblade.net/weblog/2011/inside-csswg )， 非 常 精 彩 ， 强 烈 推 在。 





图 1-3 
主持 W3C 工作 组 往往 被 比 作 养 
一 大 群 猫 


CSS3、CSS4 以 及 其 他 传说 


CSS 1 的 规范 由 Hikon Wium Lie 和 Bert Bos 发 表 于 1996 年 ， 它 非常 
短 ， 而 且 比 较 价 单 。 它 的 内 容 少 到 用 一 个 HTML 页 面 就 是 以 呈现 了 ， 即 使 
用 A4 纸 打印 出 来 也 只 需要 68 页 。 

CSS 2 发 表 于 1998 年 ， 它 的 定义 更 加 严格 ， 喜 括 了 更 多 的 功能 ， 而 
且 增 加 了 两 名 编辑 : Chris Lilley 和 Ian Jacobs。 此 时 ， 规 范 的 篇 幅 暴 增 到 了 
480 页 打印 纸 ， 人 们 已 经 无 法 把 它 完 整地 记忆 下 来 了 。 

在 CSS 2 之 后 ，CSS 工作 组 意识 到 这 门 语言 已 经 变 得 非常 庞大 ， 再 也 无 
法 把 它 星 进 单个 规范 中 了 。 这 样 不 仅 阅 读 和 编辑 极其 困难 ， 而 且 限 制 了 CSS 
本 号 的 快速 发 展 。 别 忘 了 ， 一 项 规范 如 果 要 推进 到 最 终 阶 段 ， 其 中 的 每 项 特 
性 都 必须 具备 两 个 独立 的 实现 和 全 面 的 测试 。 原 和 完 的 那 种 方式 已 经 玩 不 转 
了 。 因 此 ， 我 们 决定 跨 出 一 步 ， 将 CSS 打 散 到 多 个 不 同 的 规范 (模块 ) 中， 
每 个 模块 痢 可 以 独立 更 新 版 本 。 这 其 中 ， 那 些 延 续 CSS 2.1 已 有 特性 的 模块 
会 升级 到 3 这 个 版 本 号 。 比 如 以 下 模块 : 
CSS 语法 (http://w3.org/TR/css-syntax-3) 
CSS 层 羡 与 继承 (http://w3.org/TR/css-cascade-3) 
CSS 颜色 (http://w3.org/TR/css3-color) 
选择 符 (http://w3.org/TR/selectors) 
CSS 背景 与 边框 (http://w3.org/TR/css3-background) 
CSS 值 与 单位 (http://w3.org/TR/css-values-3) 
CSS 文本 排版 (http://w3.org/TR/css-text-3) 
CSS 文本 装饰 效果 (http://w3.org/TR/css-text-decor-3) 
CSS 字体 (http://w3.org/TR/css3-fonts) 
CSS 基本 UI 特性 (http://w3.org/TR/css3-ui) 

此 外 ， 如 采 某 个 模块 是 前 所 未 有 的 新 概念 ， 那 它 的 版 本 号 将 从 1 开始 。 
比如 下 面 这 些 : 

国 CSS 变形 (http://w3.org/TR/css-transforms-1) 

图 像 混 合 效果 (http://w3.org/TR/compositing-1) 

加 滤 镜 效果 (http://w3.org/TR/filter-effects-1) 
图 CSS 让 (http://w3.org/TR/css-masking-1) 
加 
圈 









































CSS 伸缩 盒 布局 (http://w3.org/TR/css-flexbox-1) 
CSS 网 格 布局 (http://w3.org/TR/css-grid-1) 


管 “CSS3” 这 个 名 词 非常 流行 ， 但 它 实 际 上 并 没有 在 任何 规范 中 定 
义 过 。 这 一 点 跟 CSS 2.1 或 更 早 的 CSS 1 不 一 样 。 真 正 的 情况 是 ， 绝 大 多 











数 编辑 在 提 到 这 个 词 时 ， 指 的 是 一 个 非 正式 的 集合 ， 它 包括 CSS 规范 第 三 
版 (Level 3) 再 加 上 一 些 版 本 号 还 是 1 的 新 规范 。 尽 管 在 哪些 规范 应 该 归 人 
CSS3 的 问题 上 ， 编 辑 们 达成 了 一 定 的 共识 ， 但 我 们 也 不 得 不 面 对 现 实 : 由 
于 CSS 的 各 个 模块 在 近 些 年 里 以 不 同 的 速度 在 推进 ， 我 们 已 经 越 来 越 难以 
把 这 些 规范 以 CSS3、CSS4 这 样 的 方式 来 划分 了 ， 而 且 这 样 也 难以 被 大 众 理 
解 和 接受 。 


冰 与 火 之 歌 : 浏 珊 饥 前 绥 


在 标准 的 开发 过 程 中 ， 总 是 有 大 大 的 “第 22 条 军 规 ”" 挡 在 面前 : 标准 
的 工作 组 需要 网 页 开发 者 这 一 闹 的 输入 ， 以 确保 各 项 规范 可 以 处 理 真 实 的 开 
发 需求 :但 是 开发 者 往往 没有 兴趣 尝试 那些 在 生产 环境 中 还 不 能 使 用 的 东 
西 。 当 实验 性 的 技术 被 广泛 应 用 到 生产 时 ， 工 作 组 就 被 这 些 技 术 早 期 的 、 实 
验 性 的 版 本 捆 住 手脚 六， 因为 一 旦 这 些 技术 有 变动 ， 堵 些 已 经 在 用 这 些 技 术 
的 网 站 就 挂 了 。 显 然 ， 这 完全 否定 了 让 开发 者 笑 试 早期 标准 的 好 处 。 


这 些 年 来 ， 为 了 解决 这 个 难题 ， 许 多 方案 被 提 了 出 来 ， 但 都 不 够 完美 。 
饱 受 诉 病 的 浏览 絮 前 级 就 是 其 中 之 一 。 这 个 方案 是 指 每 个 浏览 费 都 可 以 实现 
这 些 实验 性 的 (其 至 是 私有 的 、 非 标准 的 ) 特 性， 但 要 在 名 称 前 面 加 上 日 
己 特有 的 前 级 。 最 常见 的 前 级 分 别 是 Firefox 的 -moz-、IE 的 -ms-、Opera 
的 -o- 以 及 Safari 和 Chrome 的 -webkit-。 网 页 开发 者 可 以 自由 地 尝试 这 些 
加 了 前 级 的 特性 ， 并 把 试用 结果 反馈 给 工作 组 ， 而 工作 组 随后 会 将 这 些 反 馈 
吸收 到 规 邦 之 中 ， 并 且 逐 渐 完 善 该 项 特性 的 设计 。 由 于 最 终 标 准 化 的 版 本 会 
有 一 个 不 同 的 名 称 ( 没 有 前 级 )， 它 在 实际 应 用 中 就 不 会 跟 加 前 级 版 本 相 冲 
突 了 。 

听 起 来 不 错 ， 对 吧 ? 但 是 你 可 能 也 猿 到 了 ， 现 实 与 我 们 的 期 望 往往 有 
很 大 的 落差 。 当 开发 者 发 现 这 些 实 验 性 的 、 加 了 前 级 的 属性 可 以 轻而易举 地 
实现 以 前 大 费 周 章 才 能 达到 的 效 采 时， 他们 就 开始 滥用 了 。 这 些 加 了 浏览 可 
前 级 的 属性 迅速 成 为 CSS 领域 的 一 大 漳 流 。 网 上 的 教程 会 写 到 它们 ，Stack 
Overflow 上 的 问答 会 提 到 它们 …… 很 快 ， 几 乎 每 个 有 上 进 心 的 CSS 开发 者 
都 开始 争先 如 后 地 使 用 它们 。 


不 入 ， 网 页 开发 者 们 就 发 现 ， 在 使 用 这 些 神 奇 的 新 特性 时 ， 如 果 只 与 出 
当下 有 效 的 浏览 融 前 缀 ， 就 意味 看 以 后 要 经 浓 回 来 打 补 丁 : 每 当 又 一 个 浏览 
人 般 实 现 了 这 个 新 特性 时 ， 他 们 都 需要 多 加 一 行 。 跟 进 各 个 特性 在 各 个 浏览 般 
是 不 是 要 加 前 弘 ， 交 是 想 想 就 让 人 头皮 发 肪 。 开 发 痢 会 怎样 应 对 ? 那 就 是 
先发制人 地 加 上 所 有 可 能 的 浏览 带 前 级 ， 再 把 无 前 级 的 版 本 放 在 最 后 ， 以 图 
一 拖 永 逸 。 我 们 最 终 与 出 的 代码 可 能 就 是 这 样 的 : 





















































QD 《第 22 条 军 规 》 是 美国 作家 Joseph Heller 的 代表 作 ， 这 部 讽刺 小 说 被 誉 为 20 世纪 最 伟大 
的 文学 作品 之 一 。 书 中 提 到 的 “第 22 条 军 规 ”是 一 条 自 相 矛 盾 的 、 永 远 不 可 能 执行 的 悖 
论 。 一- 译 者 注 








-moz-border-radius: 10pX ; 
-ms-border-radius: 16pX; 
-0-border-radius: 10px; 
-webkit-border-radius: 10pX ; 
border-radius: 16px; 








这 里 面 有 两 条 声明 是 完全 多 余 的 : -ms-border-radius 和 -o-border- 
radius 这 两 个 属性 从 来 没有 在 任何 浏览 妖 中 出 现 过 ， 因 为 I[E 和 Opera 从 一 
开始 就 是 直接 实现 border-radius 这 个 无 前 级 版 本 的 。 


显然 ， 把 每 个 声明 属 重 复 五 遍 是 相当 枯燥 的 ， 而 且 很 难 维护 。 因 此 出 现 
菏 个 工具 来 把 这 项 工作 目 动 化 只 是 个 时 间 问 题 。 


国 像 CSS3, Please! (http://css3please.com) 和 pleeease (http://pleee- 
ase.io/playground.html〉 这 样 的 网 站 允许 你 把 无 前 级 的 CSS 代码 精 贴 
进去 ， 它 们 会 目 动 帮 你 把 必要 的 前 绥 都 加 好 。 这 类 网 站 是 “前 绥 危 
机 ”所 催生 出 的 第 一 批 工 具 ， 很 快 就 过 气 了 ， 因 为 跟 其 他 方案 相 比 ， 
它们 的 使 用 成 本 太 高 了 。 

国 Autoprefixer (https://github.com/ai/autoprefixer) 采用 Can | Use... 
Chttp:/caniuse.com) 的 数据 库 来 判断 哪些 前 缀 是 需要 添加 的 ; 此 外 ， 
它 是 在 本 地 完成 编译 的 ， 类 似 预 处 理 硕 。 

国 我 目 己 开发 的 -prefix-free (http://leaverou.github.io/prefixfree〉 会 在 
浏览 硕 中 进行 特性 检测 ， 来 决定 哪些 前 缀 是 需要 的 。 它 的 好 处 在 于 
几乎 不 需要 更 新 ， 因 为 其 所 有 信息 都 是 用 一 份 属性 清单 在 真实 的 浏 
览 融 环境 中 跑 出 来 的 绪 采 。 

加 类 似 Stylus (http://stylus-lang.com/)、LESS (http://lesscss.org) 或 
Sass (http://sass-lang.com) 的 预 处 理 需 并 不 目 计 任何 加 前 绥 的 方法 ， 
但 很 多 人 开发 过 一 些 能 为 常用 属性 加 前 级 的 mixin; 社区 中 也 有 一 些 
库 提 供 了 这 类 mixin。 


由 于 网 页 开发 者 使 用 无 前 级 的 属性 是 想 确 保 代码 的 向 前 兼容 ， 那 么 工 
作 组 想 要 修改 这 些 无 前 缀 语法 束 变 得 不 可 能 了 。 我 们 基本 上 就 跟 这 些 半生 
不 玖 的 早期 规范 绑 在 一 起 了 ， 只 能 通过 极其 有 限 的 途径 来 修改 它们 。 用 不 
了 多 久 ， 这 个 “ 坑 ” 里 的 每 个 人 就 会 意识 到 ， 浏 览 器 前 缀 已 是 一 场 史诗 般 


最 近 ， 浏 览 需 厂商 已 经 很 少 以 前 绥 的 方式 来 实验 性 地 实现 新 特性 了 。 取 
而 代 之 的 是 ， 这 些 实验 性 特性 需要 通过 配置 开关 来 局 用 ， 这 可 以 有 效 防止 开 
发 者 在 生产 环境 中 使 用 它们 ， 因 为 你 不 能 要 求 用 户 为 了 正确 地 浏览 你 的 网 站 
而 去 修改 浏览 带 设置 。 当 然 ， 这 会 导致 一 个 后 果 : 尝试 这 些 实验 性 特性 的 开 
发 者 会 减少 :但 我 们 仍然 会 得 到 足够 多 的 反馈 ， 其 至 是 更 高 质量 的 反馈 (你 
可 能 会 质疑 )， 同 时 还 避免 了 训 览 天 前 缀 的 所 有 缺 点 。 不 过 我 们 还 需要 很 长 
的 时 间 ， 才 能 从 浏览 带 前 级 所 引发 的 涟 演 效 应 中 解脱 出 来 。 






























































CSS 编码 技巧 


尽量 减少 代码 重复 


在 软件 开发 中 ， 保 持 代 码 的 DRY 和 可 维护 性 是 最 大 的 挑战 之 一 ， 而 这 
句 话 对 CSS 也 是 适用 的 。 在 实践 中 ， 代 码 可 维护 性 的 最 大 要 素 是 尽量 减少 
改动 时 要 编辑 的 地 方 。 举 例 来 说 ， 如 采 在 放大 一 个 按钮 时 需要 在 一 堆 规 则 中 
进行 10 处 修改 ， 那 就 很 可 能 会 漏 改 其 中 采 处 ， 当 你 在 给 别人 善后 时 更 是 如 
此 。 即 使 这 些 要 修改 的 地 方 很 明显 ， 或 者 最 终 可 以 找 齐 它们 ， 但 你 还 是 浪费 
了 时 间 ， 原 本 可 以 利用 这 些 时 间 来 做 点 更 有 意义 的 事情 。 


而 且 ， 这 还 不 仅仅 是 后 期 修改 的 问题 。 灵 活 的 CSS 通常 更 容易 扩展 : 
在 写 出 基础 样式 之 后 ， 只 用 极 少 的 代码 就 可 以 扩展 出 不 同 的 变 体 ， 因 为 只 需 
履 盖 一 些 变 量 就 可 以 了 。 计 我 们 来 看 一 个 例子 。 


先 来 看 看 下 面 这 段 CSS， 它 给 按钮 添加 了 一 些 效 来 〈 人 参见 图 1-4) : 





























padding: 6px 16px; 

border: 1px solid #446d88; 

background: #58a linear-gradient(#77a@bb, #58a); 
border-radius: 4px; 

box-shadow: 6 1px 5px gray; 

color: white; 

text-shadow: 6 -1px 1lpx #335166; 

font-size: 28px; 

line-height: 36pX; 


这 上段 代码 在 可 维护 性 方面 存在 一 些 问题 ， 我 们 来 一 一 修复 。 最 软 的 柿子 
应 该 是 跟 字体 尺寸 相关 的 部 分 了 。 如 果 我 们 决定 改变 字号 “(可 能 是 为 了 生成 
一 个 更 大 、 更 重要 的 按钮 )， 就 得 同时 调整 行 启 ， 因 为 这 两 个 属性 都 写成 了 
绝对 值 。 更 麻烦 的 是 ， 行 高 并 没有 反映 出 它 跟 字 号 的 关系 ， 因 此 我 们 还 得 做 
些 算 术 ， 算 出 字号 改变 之 后 的 行 高 该 是 多 少 。 当 某 些 值 相互 依赖 时 ， 应 该 把 
它们 的 相互 关系 用 代码 表达 出 来 。 在 这 个 例子 中 ， 行 高 是 字号 的 1.5 倍 。 
此 ， 把 代码 改 成 下 面 这 样 会 更 易 维 护 : 

















font-size: 268px; 
line-height: 1.5; 


既然 跨 出 了 这 一 步 ， 我 们 为 什么 还 把 字号 定 为 绝对 长 度 值 呢 ? 没 错 ， 绝 
对 值 很 容易 擎 控 ， 但 每 当 你 想 要 修改 它们 的 时 候 ， 它 们 都 会 回头 反咬 你 一 
口 。 比 如 说 ， 如 采 我 们 决定 把 父 级 的 字号 加 大 ， 就 不 得 不 修改 每 一 处 使 用 缀 
对 值 作为 字体 尺寸 的 样式 。 如 采 改 用 百分比 或 em 单位 就 好 多 了 : 

















Q 在 本 书 中 ,“ 字 号 ”是 对 字体 尺寸 (font-size) 的 俗称 。 译 者 注 








1-4 
在 我 们 的 示例 中 会 一 直 用 到 这 个 
按钮 





1-5 

只 放大 字体 会 破坏 按钮 的 其 他 效 
果 ( 最 突 元 的 就 是 圆 角 )， 因 为 它 
们 都 被 指定 了 一 些 绝对 的 长 度 值 





1-6 
现在 我 们 可 以 把 按钮 放大 ， 而 且 
它 的 所 有 效果 也 都 跟着 放大 了 


推荐 使 用 HSLA 而 不 是 
RGBA 来 产生 半 透 明 的 白色 ， 因 
为 它 的 字符 长 度 更 短 ， 敲 起 来 也 
更 快 。 这 归功 于 它 的 重复 度 更 低 。 


font-size: 天 舅 ; /* 假设 父 级 的 字号 是 16px */ 
line-height: 1.5; 


现在 ， 如 果 我 们 改变 父 级 的 了 字号， 按钮 的 尺寸 就 会 随 之 变化 。 但 是 ， 
看 起 来 很 不 协调 (参见 图 1-5)， 因 为 所 有 其 他 效 末 都 是 为 一 个 小 按钮 设计 
的 ， 并 没有 跟着 缩放 。 如 条 我 们 把 这 些 长 度 值 都 改 成 em 单位 ， 那 这 些 效 来 
的 值 就 都 变 成 可 缩放 的 了 ， 而 且 是 依赖 字号 进行 缩放 “。 按 照 这 种 方法 ， 我 
们 就 可 以 在 一 处 控制 按钮 的 所 有 尺寸 样式 了 : 





padding :Wh3em ,8en; 

border: 1px solid #446d88; 

background: #58a linear-gradient(#77a6@bb, #58a); 
border-radius: 号 @n: 

box-shadow: 6 Wo5em ,25em gray; 

color: white; 


text-shadow: © .O05em .Os5em #335166; 
font-size: 125%; 
line-height: 1.5; 


现在 我 们 的 大 号 按钮 看 起 来 更 像 是 一 个 原 按钮 的 等 比例 放大 版 本 了 ( 参 
见 图 1-6)。 请 注意 还 有 一 些 长 度 值 是 绝对 值 。 此 时 就 需要 重新 审视 到 底 哪 
些 效果 应 该 跟着 按钮 一 起 放大 ， 而 哪些 效果 是 保持 不 变 的 。 比 如 在 这 个 例子 
中 ， 我 们 希望 按钮 的 边框 粗细 你 持 在 1px， 不 受 按 钮 代 寸 的 影响 。 


不 过 ， 让 按钮 变 大 或 变 小 并 不 是 我 们 唯一 想 要 改动 的 地 方 。 颜 色 是 已 
一 个 重要 的 变数 。 比 如 ， 假 设 我 们 要 创建 一 个 红色 的 取消 按钮 ， 或 者 一 个 绿 
色 的 确定 按钮 ， 该 怎么 做 呢 ? 了 眼下， 我 们 可 能 需要 和 窗 盖 四 条 声明 (border- 
color、background、box-shadow 和 text-shadow)， 而 且 还 有 另 一 大 难题 ; 
要 根据 按钮 的 亮 面 和 上 暗 面 相对 于 主 色 调 国 #58a 变 亮 和 变 暗 的 程度 来 分 别 推 
导出 其 他 颜色 各 目的 竞 色 和 暗色 版 本 。 此 外 ， 硅 我 们 想 把 按钮 放 在 一 个 非 日 
色 的 背景 之 上 呢 ? 显然 使 用 灰色 图 gray) 作 投 影 只 适用 于 纯 白 背 景 的 情 
Ws 




















其 实 只 要 把 半 透 明 的 黑色 或 白色 县 加 在 主 色调 上 ， 即 可 产生 主 色调 的 亮 
色 和 暗色 变 体 ， 这 样 就 能 简单 地 化 解 这 个 难题 了 : 





padding: .3em .8em; 

border: 1px solid rgba(6,9,9,.1); 

background: #58a linear-gradient(hsla(06,6%,106%, .2), 
transparent); 

border-radius: .2em; 

box-shadow: 6 .65em .25em rgba(6,6,0,.5); 

color: white; 

text-shadow: 6 -.65em .65em rgba(8,08,0,.5); 





JU 这 里 我 们 希望 字号 和 其 他 尺寸 能 够 跟 父 级 的 字号 建立 关联 ， 因 此 采用 了 em 单位 。 但 在 某 些 
情况 下 ， 你 可 能 希望 这 些 尺 寸 是 和 根 级 字号 〈 妈 <html> 元 素 的 字号 ) 相关 联 的 ， 此 时 使 用 
em 可 能 会 导致 复杂 的 计算 。 在 这 种 情况 下 ， 你 可 以 使 用 rem 单位 。 在 CSS 中 ， 相 关 性 是 一 
个 很 重要 的 特性 ， 但 你 得 想 清楚 到 撒 哪 些 东西 是 真正 相关 的 。 











font-size: 125%; 
line-height: 1.5; 


现在 我 们 只 要 有 覆 六 background-color 属性 ， 就 可 以 得 到 不 同 颜色 版 本 
的 按钮 了 《人 参见 图 1-7 ) : 


button.cancel { 
background-color: #c60; 


} 


button.ok { 
background-color: #6b0; 
}; 








我 们 的 按钮 现在 已 经 非常 灵活 了。 不 过 ， 这 个 例子 并 没有 泗 盖 所 有 能 让 
代码 变 得 更 DRY 的 方法 。 你 会 在 下 面 儿 节 中 发 现 更 多 的 技巧 。 


1. 代码 易 维护 vs. 代码 量 少 


有 时 候 ， 代 码 易 维 护 和 代码 量 少 不 可 兼 得 。 比 如 在 上 面 的 例子 中 ， 我 们 
最 终 采 用 的 代码 甚至 比 一 开始 的 版 本 略 长 。 来 看 看 下 面 的 代码 片断 ， 我 们 要 
为 一 个 元 素 添 加 一 道 16px 宽 的 边框 ， 但 左 侧 不 加 边框 。 








border-width: 16px 16px 16px ©; 


只 要 这 一 条 声明 就 可 以 搞定 了 ， 但 如 果 日 后 要 改动 边框 的 宽度 ， 你 需要 
同时 改 三 个 地 方 。 如 果 把 它 拆 成 两 条 声明 的 话 ， 改 起 来 就 容易 多 了 ， 而 且 可 
读 性 或 许 更 好 一 些 ; 











border-width: 16px; 
border-left-width: 6; 


2. currentColor 


在 CSS 颜色 (第 三 版 (http://w3.org/TR/ecss3-color) 规范 中 ， 增 加 了 
很 多 新 的 颜色 关键 字 ， 比 如 lightgoldenrodyellow 等 ， 其 实 并 不 是 很 常 
用 。 人 但是， 我们 还 得 到 了 一 个 特殊 的 颜色 关键 字 currentColor， 它 是 从 
SVG 那里 借鉴 来 的 。 这 个 关键 字 并 没有 绑 定 到 一 个 固定 的 颜色 值 ， 而 是 一 
直 被 解析 为 color。 实 际 上 ， 这 个 特性 让 它 成 为 了 CSS 中 有 史 以 来 的 第 一 
个 变量 了 ”。 虽 然 功能 很 有 限 ， 但 它 真 的 是 个 变量 。 


举 个 例子 ， 假 设 我 们 想 让 所 有 的 水 平分 割 线 (所 有 <hr> 元 系 ) 目 动 与 
文本 的 颜色 保持 一 致 。 有 了 currentColor 之 后 ， 我 们 只 需要 这 样 写 : 























J 可 能 有 人 会 争论 说 em 单位 才 是 CSS 中 的 第 一 个 变量 ， 因 为 它 引 用 了 font-size 的 值 。 其 实 
大 多 数 百 分 比 数值 也 扮演 了 类 似 的 角色 ， 只 不 过 它们 的 工作 方式 不 是 很 起 眼 。 


图 1-7 
只 要 改变 背景 色 ， 就 可 以 得 到 其 
他 颜色 版 本 的 按钮 了 


Your username: 


leaverou 


Only letters, numbers, underscores 
(_) and hyphens (-) allowed! 





图 1-8 
提示 框 的 小 箭头 从 父 元 素 那 里 获 
取 了 背景 色 和 边框 样式 


hr { 
height: .5em; 
background: currentColor; 


} 








你 可 能 已 经 注意 到 了 ， 很 多 已 有 的 属性 也 具有 类 似 的 行为 。 举 例 来 
说 ， 如 果 你 没有 给 边框 指定 颜色 ， 它 就 会 日 动 地 从 文本 颜色 那里 得 到 颜 
色 。 这 是 因为 currentColor 本 刁 就 是 很 多 CSS 颜色 属性 的 初始 值 ， 比 如 
border-color 和 outline-color， 以 及 text-shadow 和 box-shadow 的 颜 
色 信 ， 等 等 。 


未 来 ， 我 们 在 原生 CSS 中 拥有 处 理 颜 色 的 函数 后 ，currentColor 就 会 
变 得 更 加 有 用 ， 因 为 我 们 可 以 用 这 些 函 数 来 产生 其 各 种 深浅 明暗 的 变 体 。 








3. 继承 


尽管 绝 大 多 数 开 发 者 都 知道 有 inherit 这 个 关键 字 ， 但 还 是 很 容易 遗 
已 它 。inherit 可 以 用 在 任何 CSS 属性 中 ， 而 且 它 总 是 绑 定 到 父 元 又 的 计 
算 值 〈 对 伪 元 系 来 说 ， 则 会 取 生 成 该 伪 元 素 的 宿主 元 素 )。 举 例 来 说 ， 要 把 
表单 元 素 的 字体 设 定 为 与 页 面 的 其 他 部 分 相同 ， 你 并 不 需要 重复 指定 字体 属 
性 ， 只 需 利 用 inherit 的 特性 即 可 : 























input, select, button { font: inherit; } 


与 此 类 似 ， 要 把 超 链接 的 颜色 设 定 为 与 页 面 中 其 他 文本 相同 ， 还 是 要 用 


inherit: 
a { color: inherit; } 


这 个 inherit 关键 字 对 于 背景 色 同 样 非常 有 用 。 举 个 例子 ， 在 创建 提 
示 框 的 时 候 ， 你 可 能 希望 它 的 小 季 头 能 够 日 动 继承 背景 和 边框 的 样式 (参见 
1-8) : 


.Callout { position: relative; } 


.Ccallout: :before { 
content: ""; 
position: absolute; 
top: -.4em; left: 1em; 
padding: .35em; 
background: inherit; 
border: inherit; 
border-right: 6; 
border-bottom: 6; 
transform: rotate(45deg); 


相信 你 的 眼睛 ， 而 不 是 数字 


人 的 眼睛 并 不 是 一 台 完 美的 输入 设备 。 有 时 候 精准 的 尺度 看 起 来 并 不 精 
准 ， 而 我 们 的 设计 需要 顺应 这 种 偏差 。 举 一 个 在 视觉 设计 领域 广为人知 的 例 
子 吧 ， 我 们 的 眼睛 在 看 到 一 个 完美 牌 直 居 中 的 物体 时 ， 会 感觉 它 并 不 居中 。 
实际 上 ， 我 们 应 该 把 这 个 物体 从 几何 学 的 中 心 点 再 稍微 癌 上 挪 一 点 ， 才 能 
得 理想 的 视觉 效果 。 来 杂 刁 体验 一 下 这 件 怪 事 吧 〈 人 参见 图 1-9)。 


与 此 类 似 ， 在 字体 设计 领域 广为人知 的 是 ， 圆 形 的 字形 《〈 比 如 0) 与 矩 
形 字形 相 比 ， 需 要 稍微 放大 一 些 ， 因 为 我 们 倾 回 于 把 圆 形 感知 得 比 其 实际 太 
寸 更 小 一 些 。 你 也 可 以 在 图 1-10 中 体验 一 下 。 


这 些 视觉 上 的 错觉 在 任何 形式 的 视觉 设计 中 都 普遍 存在 ， 需 要 我 们 有 人 和 针 
对 性 地 进行 调整 。 一 个 非常 第 见 的 例子 是 给 一 个 文本 容 冲 设置 内 边 中 。 不 论 
内 容 文本 有 多 长 ， 是 一 个 单词 还 是 几 个 段落 ， 这 个 问题 部 会 出 现 。 假 如 我 们 
给 容 人 大 的 四 边 指 定 相同 的 内 边 距 ， 则 实际 效 灯 看 起 来 并 不 相等 ， 束 像 图 1-11 
显示 的 那样 。 原 因 在 于 ， 字 母 的 形状 在 两 端 都 比较 整齐 ， 而 顶部 和 底部 则 往 
往 参 差 不 齐 ， 从 而 导致 你 的 眼睛 把 这 些 参差 不 齐 的 空缺 部 分 感知 为 多 出 来 的 
内 边 距 。 因 此 ， 如 采 我 们 和 希望 四 边 的 内 边 距 看 起 来 是 基本 一 致 的 ， 就 需要 减 
少 项 部 和 底部 的 内 边 距 。 你 可 以 在 图 1-12 中 看 出 这 种 差异 。 























关于 响应 式 网 页 设计 


响应 式 网 页 设计 (Responsive Web Design，RWD) 在 最 近 几 年 风靡 一 
时 。 人 但是， 人们 大 多 只 是 在 不 停 念 明 网 页 的 “ 啊 应 式 ” 是 多 人 么 重要 ， 而 极 少 
有 人 去 深入 探讨 怎样 才能 做 好 响应 式 设 计 。 


比较 稼 见 的 实践 是 用 多 种 分 辨 挛 来 测试 一 个 网 站 ， 然 后 添加 越 来 越 多 的 
嫁 体 查询 〈Media Query〉 规 则 来 修补 网 站 在 这 些 分 辨识 下 出 现 的 问题 。 然 
而 对 于 今后 的 CSS 改动 来 说 ， 每 个 媒体 查询 都 会 增加 成 本 ， 而 这 种 成 本 是 
不 应 轻易 上 升 的 。 未 来 每 次 对 CSS 代码 的 修改 狠 要 求 我 们 逐一 核对 这 些 媒 
体 查 询 是 否 需 要 配合 修改 ， 甚 至 可 能 要 求 我 们 反 过 来 修改 这 些 媒体 查询 的 设 
置 。 这 一 点 党 第 被 我 们 忽略 ， 后 患 无 穷 。 你 洪 加 的 媒体 查询 越 多 ， 你 的 CSS 
代码 就 会 变 得 越 来 越 经 不 起 折腾 。 


这 并 不 是 说 媒体 查询 是 一 种 不 良 实践 。 只 要 用 对 了 ， 它 就 是 利器 。 但 
是 ， 你 只 应 该 把 它 作为 最 后 的 手段 。 比 如 你 想 把 网 站 做 得 弹性 灵活 ， 但 其 他 
答 试 全 都 失败 了 ;或 者 我 们 硕 望 在 较 大 或 较 小 的 视 口 下 完全 改变 网 站 的 设计 
形态 〈 辟 如， 把 侧 栏 改 成 水 平 布局 )。 我 这 么 说 的 原因 在 于 ， 媒 体 查 询 不 能 
以 一 种 连续 的 方式 来 修复 问题 。 它 们 的 工作 原理 基于 某 几 个 特定 的 阶梯 《〈 亦 
称 “ 渐 点 ”)， 如 果 大 部 分 样式 代码 并 不 是 以 弹性 的 方式 来 编写 的 ， 那 么 媒体 
查询 能 做 的 只 是 修补 菏 个 特定 分 辨 到 下 的 特定 问题 一 一 这 本 质 上 只 是 把 灰尘 
扫 到 地 毯 下 面 而 已 。 



































1-9 

在 第 一 个 窍 形 中 ， 棕 色 方 块 在 数 
学 层面 上 是 完美 垂直 居中 的 ， 但 
看 起 来 并 不 是 这 样 ; 在 第 二 个 算 
形 中 ， 方 块 从 几何 中 心 向 上 轻微 
移动 了 一 点 儿 ， 但 它 在 人 类 的 眼 
睛 看 来 却 是 恰好 居中 的 


1-10 
圆 形 看 起 来 要 小 一 些 ， 但 实际 上 它 
占据 的 宽 高 和 方形 是 完全 一 样 的 








1-11 

为 容器 的 四 边 指 定 了 相同 的 内 边 
距 ( 这 里 用 了 .5em )， 但 实际 看 
起 来 上 下 空 得 多 ， 左 右 空 得 少 


CSS 编码 技巧 


Yele 
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如 果 把 左右 内 边 距 增 大 一 些 ( 这 
里 把 padding 属 性 写成 .3em 
.7em )， 看 起 来 就 明显 更 加 统一 了 





不 妨 考 虑 在 你 的 媒体 查询 中 
使 用 em 单位 取代 像素 单位 。 这 能 
让 文本 缩放 在 必要 时 触发 布局 的 
变化 。 


当然 ， 有 一 点 上 面 并 没有 提 到 ， 媒 体 查 询 的 断 点 不 应 该 由 具体 的 设备 来 
决定 ， 而 应 该 根据 设计 目 身 来 决定 。 这 不 仅 是 因为 我 们 的 网 站 需要 面 加 的 设 
备 太 多 了 (尤其 是 考虑 到 未 来 的 设备 时 )， 还 因为 一 个 网 站 在 桌面 端 可 能 会 
以 任意 玉 寸 的 窗口 来 显示 。 如 末 你 有 信心 目 己 的 设计 在 任何 可 能 出 现 的 视 口 
尺寸 下 都 能 良好 工作 ， 谁 关心 这 些 设备 的 分 辨识 具体 是 多 少 呢 ? 


避 从 “尽量 减少 代码 重复 ”所 描述 的 原则 对 此 也 是 有 帮助 的 ， 因 为 你 不 
需要 去 窗 益 媒体 查询 里 同样 数量 的 声明 。 这 在 本 质 上 减轻 了 它们 所 产生 的 维 
护 成 本 。 

下 面 还 有 一 些 建议 ， 可 能 会 帮 你 避免 不 必要 的 媒体 查询 。 


国 使 用 百分比 长 度 来 取代 固定 长 度 。 如 果实 在 做 不 到 这 一 点 ， 也 应 该 
尝试 使 用 与 视 口 相关 的 单位 (vw、vh、vmin 和 vmax)， 它 们 的 值 解 
析 为 视 口 宽度 或 高 度 的 百分比 。 

加 当 你 需要 在 较 大 分 辨 率 下 得 到 固定 宽度 时 ， 使 用 max-width 而 不 是 
width， 因 为 它 可 以 适应 较 小 的 分 辨 率 ， 而 无 需 使 用 媒体 查询 。 

国 不 要 忘记 为 奉 换 元 素 〈 比 如 img、object、video、iframe 等 ) 设 
置 一 个 max-width， 值 为 166%。 

恒 假如 背景 网 片 需要 完整 地 铺 满 一 个 容 希 ， 不 管 容 需 的 矿 二 如何 变 化 ， 
background-size: cover 这 个 属性 都 可 以 做 到 。 但 是 ， 我 们 也 要 时 
刻 牢 记 一 一 市 宽 并 不 是 无 限 的 ， 因 此 在 移动 网 页 中 通过 CSS 把 一 张 
大 图 缩小 显示 往往 是 不 太 明 智 的 。 

加 当 图 片 〈 或 其 他 元 素 ) 以 行列 式 进行 布局 时 ， 让 视 口 的 宽度 来 决定 
列 的 数量 。 弹 性 盒 布 局 〈 即 Flexbox) 或 者 display: inline-block 
加 上 营 规 的 文本 折 行 行为 ， 都 可 以 实现 这 一 点 。 

加 在 使 用 多 列 文本 时 ， 指 定 column-width( 列 宽 ) 而 不 是 指定 
column-count《〈 列 数 )， 这 样 它 就 可 以 在 较 小 的 屏幕 上 有 目 动 显示 为 单 
列 布局 。 


总 的 来 说 ， 我 们 的 思路 是 尽 最 大 努力 实现 弹性 可 伸缩 的 布局 ， 并 在 媒体 
查询 的 各 个 断 点 区 间 内 指定 相应 的 尺寸 。 当 网 页 本 喘 的 设计 足够 灵活 时 ， 诈 
它 变 成 啊 应 式 应 该 只 需要 用 到 一 些 人 简短 的 媒体 查询 代码 。Basecamp 的 设计 
师 在 2010 年 写 到 过 这 种 非常 规 情况 。 


“结果 我 们 发 现 ， 想 让 网 页 在 一 堆 不 同 的 设备 上 合理 展示 ， 只 需要 在 
最 终 产 品 上 添加 一 点 CSS 媒体 查询 就 可 以 了 。 这 件 事情 之 所 以 这 么 简单 ， 
关键 在 于 我 们 的 布局 原本 就 是 弹性 可 伸缩 的 。 因 此 ， 优 化 网 页 在 小 屏幕 上 
的 表现 ， 其 实 只 意味 着 把 一 些 外 边 距 收拢 到 最 小 程度 ， 然 后 把 因为 屏幕 太 
罕 而 无 法 显示 成 双 列 的 侧 栏 调整 为 单列 布局 而 已 。 















































一 一 在 lterations 中 实践 响应 式 设计 (http://signalvnoise.com/posts/ 


2661-experimenting-with-responsive-design-in-iterations) 





如 末 你 发 现 上 自己 需要 一 大 堆 媒 体 查 询 才 能 让 设计 适应 大 大 小 小 的 屏幕 ， 
那么 不 妨 后 退 一 步 ， 重 新 审视 你 的 代码 结构 。 因 为 在 所 有 的 情况 下 ， 啊 应 式 
都 不 是 唯一 需要 考虑 的 问题 。 
合理 使 用 简 与 

你 可 能 知道 ， 以 下 两 行 CSS 代码 并 不 是 等 价 的 : 

background: rebeccapurple; 


background-color: rebeccapurple; 





前 者 是 简写 ， 它 可 以 确保 你 得 到 国 rebeccapurple 纯色 背景 ， 但 如 果 
你 用 的 是 展开 式 的 单个 属性 (background-color)， 那 这 个 元 素 的 背景 最 终 
有 可 能 会 显示 为 一 个 粉色 的 渐变 图 案 、 一 张 猫 的 图 片 或 其 他 任何 东西 ， 因 为 
同时 可 能 会 有 一 条 background-image 声明 在 起 作用 。 在 使 用 展开 式 属性 的 
写法 时 ， 通 常会 遇 到 这 样 的 问题 ， 展 开 式 写法 并 不 会 帮助 你 清空 所 有 相关 的 
其 他 属性 ， 从 而 可 能 会 干扰 你 想 要 达到 的 效果 。 

当然 ， 你 可 以 把 所 有 的 展开 式 属性 全 都 设置 一 裔 ， 然 后 收工 ， 但 你 可 能 
会 涯 挥 几 个 ;， 又 或者，CSS 工作 组 可 能 会 在 未 来 引信 更 多 的 展开 式 属 性 ， 那 
时 你 的 代码 就 无 法 完全 禾 产 它们 了。 不 要 害怕 使 用 和 俐 写 属性 。 合 理 使 用 简写 
是 一 种 良好 的 防卫 性 编码 方式 ， 可 以 抵御 未 来 的 风险 。 当 然 ， 如 果 我 们 要 了 明 
确 地 去 覆盖 某 个 具体 的 展开 式 属性 并 保留 其 他 相关 样式 ， 那 就 需要 用 展开 式 
属性 ， 就 像 我 们 在 “尽量 减少 代码 重复 ”一 闻 中 为 了 得 到 按钮 的 其 他 颜色 版 
本 所 做 的 那样 。 

展开 式 属 性 与 简写 属性 的 配合 使 用 也 是 非 第 有 用 的 ， 可 以 让 代码 更 加 
DRY。 对 于 那些 接受 一 个 用 逗号 分 隔 的 列表 的 属性 (比如 background),， 尤 
其 如 此 。 下 面 的 例子 可 以 很 好 地 解释 这 一 点 : 



































background: url(tr.png) no-repeat top right / 2em 2em， 
url(br.png) no-repeat bottom right / 2em 2em， 
url(bl.png) no-repeat bottom left / 2em 2em; 


请 注意 background-size 和 background-repeat 的 值 被 重复 了 三 遍 ， 
尽管 每 层 背 景 的 这 两 个 值 确 实 是 相同 的 。 其 实 我 们 可 以 从 CSS 的 “列表 扩 
散 规 则 ”那里 得 到 好 处 。 它 的 意思 是 说 ， 如 果 只 为 某 个 属性 提供 一 个 值 ， 那 
它 就 会 扩散 并 应 用 到 列表 中 的 每 一 项 。 因 此 ， 我 们 可 以 把 这 些 重复 的 值 从 简 
写 属 性 中 抽出 来 写成 一 个 展开 式 必 性 : 











background: url(tr.png) top right, 
url(br.png) bottom right, 
url(bl.png) bottom left; 

background-size: 2em 2em; 

background-repeat: no-repeat; 


现在 ， 我 们 只 需要 在 一 处 修改 ， 就 可 以 改变 所 有 的 background-size 
和 background-repeat 了 。 你 会 发 现 这 个 技巧 在 本 书 中 的 使 用 非常 普 i 


我 应 该 使 用 预 处 理 器 吗 


你 很 可 能 听 说 过 像 Stylus (http://stylus-lang.com/)、Sass (http://sass- 
lang.com/) 或 LESS (http:Wlesscss.ore/) 这 样 的 CSS 预 处 理 硕 。 它 们 为 CSS 
的 编写 提供 提供 了 一 些 便 利 ， 比 如 变量 、mixin、 国 数 、 规 则 瞬 套 、 颜 色 处 
ES 


如 果 使 用 得 当 ， 它 们 在 大 型 项 目 中 可 以 让 代码 更 加 灵活 ， 而 CSS 日 映 
在 这 方面 确实 有 很 大 局 限 。 只 要 我 们 在 代码 健壮 性 、 灵 活性 和 DRY 方面 
有 奶 求 ， 惑 会 感受 到 CSS 在 这 方面 的 局 上限。 不 过 ， 预 处 理 带 也 不 是 完美 无 
缺 的 。 











CSS 的 文件 体积 和 复杂 度 可 能 会 失控 。 即 使 是 人 简洁 明了 的 源 代码 ， 
在 经 过 编译 之 后 也 可 能 会 变 成 一 头 从 天 而 降 的 巨 兽 。 

调试 难度 会 增加 ， 因 为 你 在 开发 工具 中 看 到 的 CSS 代码 并 不 是 你 写 
的 源 代 码 。 不 过 这 个 问题 已 经 大 大 好 转 了 ， 因 为 已 经 有 越 来 越 多 的 
调试 工具 开始 文 持 SourceMap 。SourceMap 是 一 种 非常 酷 的 新 技术 ， 
下 是 为 了 解决 这 个 痛 点 而 生 的 ， 它 会 告诉 浏览 絮 哪 些 编译 生成 的 
CSS 代码 对 应 哪些 预 处 理 器 CSS 代码 ， 精 确 到 行 号 。 

预 处 理 各 在 开发 过 程 中 引入 了 一 定 程 度 的 延 时 。 尽 管 它 们 通常 很 快 ， 
但 仍然 需要 差不多 一 秒 钟 的 时 间 来 把 你 的 源 代码 编译 成 CSS， 而 你 
不 得 不 等 待 这 段 时 间 才 能 预览 到 代码 的 效果 。 











怪异 的 简写 语法 


你 可 能 已 经 注意 到 前 面 那个 背景 属性 简写 的 例子 了 ， 在 background 简写 属性 中 指定 background-size 
时 ， 需 要 同时 提供 一 个 background-position 值 ( 哪怕 它 的 值 就 是 其 初始 值 也 需要 写 出 来 )， 而 且 还 要 使 
用 二 hE | 

这 通常 都 是 为 了 消除 歧义 。 在 这 个 例子 中 ，top right 显然 是 background-position， 而 2em 2em 是 
background-size， 不 管 它 们 的 顺序 如 何 。 但 是 ， 请 设想 一 下 56% 56% 这 样 的 值 ， 它 人 到底 是 background- 
size 还 是 background-position 呢 ? 当 你 在 使 用 展开 式 属 性 时 ，CSS 解析 妖 明 日 你 的 意图 ; 而 当 你 使 用 
简写 属性 时 ， 解 析 器 需要 在 疫 有 属性 名 提示 的 情况 下 弄 清楚 56% 56% 到 讨 指 什么 。 这 就 是 需要 引入 冬 杜 的 
原因 。 

对 绝 大 多 数 的 简写 属性 来 说 ， 并 没有 这 样 的 歧义 问题 ， 因 而 简写 属性 的 多 个 值 往往 可 以 随意 排列 。 不 
过 ， 我 还 是 建议 你 养 成 随手 查阅 语法 的 好 习惯 ， 以 免 犯 错 。 如 果 你 对 正则 表达 式 以 及 规范 的 语法 描述 方式 
( grammar ) 很 熟悉 的 话 ， 不 妨 直 接 在 相关 规范 中 查询 语法 描述 。 如 果 要 确定 某 个 属性 的 值 是 否 有 明确 的 
顺序 要 求 ， 这 可 能 是 最 快 的 方式 。 











恒 每 次 抽象 都 必然 会 市 来 更 高 的 学 习 成 本 ， 每 当 有 新 人 加 入 到 我 们 的 
代码 库 中 ， 这 个 问题 都 会 重演 。 他 要 人 么 已 经 对 我 们 选择 的 这 门 预 处 
理 需 “方言 ”很 融 悉 ， 要 么 得 从 头 学 。 这 意味 独 我 们 要 么 强制 协作 
者 接受 我 们 的 选择 ， 要 么 花费 额外 的 时 间 来 培训 ， 而 这 两 者 都 不 是 
我 们 想 要 的 。 
恒 另外 ， 别 忘 了 还 有 抽象 泄漏 法 则 :“ 所 有 重大 的 抽象 机 制 在 某 种 程度 
上 都 存在 泄漏 的 情况 。” 预 处 理 套 是 由 人 类 写 出 来 的 ， 就 像 所 有 由 
人 类 写 出 来 的 大 型 程序 一 样 ， 它 们 有 它们 自己 的 bug。 这 些 bug 可 
能 会 潜伏 很 人 人， 因为 我 们 很 少 会 怀疑 预 处 理 冀 的 某 个 bug 才 是 我 们 
CSS 出 错 的 幕后 元 区 | 。 
除了 上 面 列 出 的 这 些 问 题 ， 预 处 理 需 还 可 能 导致 这 种 风险 : 网 站 开发 者 
可 能 会 不 目 党 地 “依赖 ”和 “ 浅 用 ” 因为 在 某 些 时 候 ， 预 处 理 带 并 不 必要 。 
比如 在 小 型 项 目 中 ;或 者 在 未 来 ， 说 不 定 预 处 理 需 最 受 欢 迎 的 那些 特性 都 被 
加 入 了 原生 CSS 中 。 很 惊讶 吗 ? 没 错 ， 很 多 受 预 处 理 器 启发 的 特性 都 已 经 
以 各 种 方式 融入 到 原生 CSS 中 了 。 
恒 有 一 份 天 于 〈 跟 变量 类 似 的 ) 目 定 义 属性 的 草案 ， 叫 作 CSS 自 定义 
属性 暨 层 灵 式 变量 (http://w3.org/TR/css-variables-1)。 
国 CSS 值 与 单位 (第 三 版 ) 中 的 calc() 郴 数 ， 不 仅 在 处 理 运 算 时 非常 
强大 ， 而 且 已 经 得 到 了 广泛 的 文 择 ， 当 下 可 用 。 
国 CSS 颜色 (第 四 版 〉(http://dev.w3.org/cssweg/css-color) 引入 的 color() 
贞 数 会 提供 颜色 运算 方法 。 
加 关于 般 僚 ，CSS 工作 组 内 部 正在 进行 一 些 正 式 的 讨论 ， 甚 至 以 前 还 
有 过 一 份 相关 的 草 宁 (ED)。 


请 注意 ， 这 些 原生 特性 通常 比 预 处 理 器 提供 的 版 本 要 强大 得 多 ， 因 为 它 
们 是 动态 的 了。 举 个 例子 ， 预 处 理 器 完全 不 知道 如 何 完 成 196% - 5e8px 这 样 
的 计算 ， 因 为 在 页 面 真正 被 演 染 之 前 ， 百 分 比值 是 无 法 解析 的 。 但 是 ， 原 生 
CSS 的 calc() 在 计算 这 样 的 表达 式 时 没有 任何 压力 。 与 此 类 似 ， 下 面 这 样 
的 变量 玩法 在 预 处 理 需 中 是 不 可 能 做 到 的 : 


























ul { --accent-color: purple; } 
ol { --accent-color: rebeccapurple; } 
li { background: var(--accent-color); } 








你 看 清楚 这 段 代码 的 意图 了 吗 ? 在 有 序列 表 中 ， 列 表 项 的 背景 色 将 是 
侠 -sbeccapurple; 但 在 无 序列 表 中 ， 列 表 项 的 背景 色 将 是 国 purple. 试 
试用 预 处 理 需 能 否 做 到 ! 当然 ， 在 这 个 例子 中 ， 我 们 可 以 直接 使 用 后 代 选 择 
符 ， 只 不 过 这 个 例子 的 重点 在 于 回 你 展示 CSS 的 原生 变量 所 具备 的 动态 性 。 








JU 不 要 筷 了 这 样 的 原生 CSS 特性 也 可 以 通过 脚本 来 操纵 。 比 如 说 ， 你 可 以 用 JS 来 改变 一 个 变 
量 的 值 。 


1-13 

Myth(http://myth.io) 是 一 款 实 验 
性 质 的 预 处 理 器 ， 它 只 模拟 上 述 
原生 的 CSS 新 特性 ， 而 不 是 引 
入 私有 语法 。 它 本 质 上 扮演 了 
CSSpolyfill 的 角色 





Myth 


CSS the way it was imagined. 


Myth is a preprocessor that lets you write pure CSS without having to 
worry about slow browser support, or even slow spec approval. 
It's like a CSS polyfill, 


上 面 提 到 的 原生 CSS 特性 绝 大 多 数 在 目前 还 没有 得 到 很 好 的 文 持 ， 
此 在 很 多 情况 下 ， 如 果 可 维护 性 很 重要 《〈 它 确实 很 重要 )， 使 用 预 处 理 器 是 
不 可 避免 的 。 我 的 建议 是 ， 在 每 个 项 目 开 始 时 使 用 纯 CSS， 只 有 当代 码 开 
台 变 得 无 法 保持 DRY 时 ， 才 切换 到 预 处 理 器 的 方案 。 为 了 避免 可 能 发 生 的 
“依赖 ”或 “滥用 ”在 引入 预 处 理 器 的 问题 上 需要 冷静 决策 ， 不 应 该 在 每 个 
项 目 一 开始 时 就 不 动脑 筋 顺 着 惯性 来 。 

可 能 你 还 不 知道 〈 或 许 直接 跳 过 了 前 言 ， 喷 喷 )， 这 里 再 说 一 次 ， 这 本 
书 的 样式 是 用 SCSS 与 的 。 这 些 样 式 代 码 以 纯 CSS 起 步 ， 而 且 只 在 代码 增 
长 得 太 过 复杂 以 致 无 法 维护 时 才 切 到 SCSS。 谁 说 CSS 和 预 处 理 器 只 能 用 在 
网 页 上 ? 








半 透 明 边 杠 


RGBA/HSLA 颜色 





难 匮 


相信 你 以 前 肯定 尝试 过 CSS 中 的 半 透 明 颜色 ， 比 如 rgba() 和 hs1la()。 
半 透 明 颜色 是 2009 年 发 生 的 一 场 重 大 变 羊 。 从 那 以 后 ， 我 们 终于 可 以 在 网 
页 设计 中 使 用 它们 了 ， 但 是 为 了 尝鲜 还 需要 付出 额外 的 代价 。 比 如 说 ， 我 
们 需要 做 好 回 退 ， 加 载 shim 脚本 ， 甚 至 在 了 正 下 还 需要 用 到 恶心 的 滤 镜 来 
hack。 尽 管 半 透明 颜色 很 受 欢 迎 ， 但 人 们 对 它 的 使 用 基本 上 还 是 集中 在 背景 
上 的 。 这 里 面 有 一 些 原因 。 


加 一 些 早 期 尝鲜 者 并 没有 意识 到 这 些 新 的 颜色 格式 也 是 真正 的 闫 色 ， 
与 国 #ffees6 和 国 orange 一 样 ， 而 是 把 它们 当 作 图 片 ， 只 在 背景 
中 使 用 。 

罩 针对 背景 提供 回 退 方案 要 比 其 他 属性 容易 得 多 。 举 例 来 说 ， 如 果 要 
为 半 透 明 背 景色 提供 回 退 方案 ， 可 能 只 需要 准备 一 张 单 像素 的 半 透 
明 图 片 就 行 了 了。 而 对 其 他 属性 来 说 ， 只 能 回 退 到 一 个 实 色 。 

加 在 其 他 属性 〈 比 如 边框 ) 中 使 用 半 透 明 颜色 并 没有 想像 中 那么 容易 。 
我 们 接 下 来 就 会 看 到 。 

假设 我 们 想 给 一 个 容器 设置 一 层 白色 背景 和 一 道 半 透 明白 色 边 框 ，body 

的 背景 会 从 它 的 半 透 明 边 框 透 上 来 。 我 们 最 开始 的 尝试 可 能 是 这 样 的 : 





























border: 16px solid hs1a(6,6%,1660%，.5); 
background : white; 


除非 你 对 背景 和 边框 的 工作 原理 有 闭 非 常 好 的 理解 ， 否 则 这 个 结 末 〈 参 
见 图 2-2) 可 能 会 令 你 摸 不 春 头脑 。 我 们 的 边框 去 哪儿 了 啊 ?” 而 且 如 采 我 们 
连 使 用 半 透 明 颜 色 神 不 能 实现 半 透 明 边 框 ， 那 我 们 还 有 什么 办 法 ? ! 
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Many of you have probably seen my CSS3 patterns gallery. It became very popular 
throughout the year and it showed many web developers how powerful CSS3 
gradients really are. But how many really understand how these patterns are 
created? The biggest benefit of CSS-generated backgrounds is that they can be 
modified directly within the style sheet. This benefit is void if we are just copying and 
pasting CSS code we don't understand. We may as well use a data URI instead. 
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Important note 


In all the examples that follow, [ll be using gradients without a vendor prefix, for 
readability and brevity. However, you should keep in mind that in reality you need to 
use all the vendor prefixes ( -moz- , -ms- ，-o- , -webkit- ) as no browser 
currently implements them without a prefix, Alternatively, you could use -prefix-free 
and have the current vendor prefix prepended at runtime, only when needed. 


The syntax described here is the one that browsers currently implement. The 
specification has since changed, but no browser implements the changes yet. If you 
are interested in what is coming, | suggest you take a look at the dev version of the 
spec. 


解决 方案 


尽管 看 起 来 并 不 像 那么 回 事 ， 但 我 们 的 边框 其 实 是 存在 的 。 移 认 人 情况 下 ， 
背景 会 延伸 到 边框 所 在 的 区 域 下 层 。 这 一 点 很 容易 验证 ， 给 一 个 有 背景 的 元 
系 应 用 一 道 老 土 的 虚线 边框 ， 就 可 以 看 出 来 (参见 图 2-3)。 即 使 你 使 用 的 是 
不 透明 的 实 色 边框 ， 这 个 事实 也 不 会 有 任何 改变 。 只 不 过 在 上 面 的 例子 中 ， 
这 个 特性 完全 打破 了 我 们 的 设计 意图 。 我 们 所 做 的 事情 并 没有 让 body 的 背景 
从 半 透 明日 色 边 框 处 透 上 来 ， 而 是 在 半 透 明日 色 边 框 处 透 出 了 这 个 容 俘 目 己 
的 纯 日 实 色 背景 ， 这 实际 上 得 到 的 效 灯 跟 纯 日 实 色 的 边框 看 起 来 完全 一 样 。 


在 CSS 2.1 中 ， 这 就 是 背景 的 工作 原理 。 我 们 只 能 接受 它 并 且 回 前 看 。 
谢 天 谢 地 ， 从 背景 与 边框 〈 第 三 版 ) Chttp:/w3.org/TR/css3-background) 开 
台 ， 我 们 可 以 通过 background-clip 属性 来 调整 上 述 默 认 行 为 所 市 来 的 不 
便 。 这 个 属性 的 初始 值 是 border-box， 意 味 着 背景 会 被 元 素 的 border box 
(边框 的 外 党 框 ) 裁 切 摊 。 如 采 不 布 望 背景 侵入 边框 所 在 的 范围 ， 我 们 要 做 
的 就 是 把 它 的 值 设 为 padding-box， 这 样 浏览 妖 就 会 用 内 边 距 的 外 沿 来 把 背 
景 裁 切 挥 。 














border: 16px solid hsla(06,06%,10606%, .5); 
background: white; 
background-clip: padding-box; 


我 们 在 图 2-4 中 可 以 看 到 这 个 完美 的 绪 采 。 


图 2-1 

24ways.org 早 在 2008 年 就 开始 
在 网 页 设计 中 使 用 半 透 明 颜 色 了 ， 
是 最 早 尝 鲜 的 网 站 之 一 。 只 不 过 
他 们 也 大 多 是 在 背景 中 使 用 ( 由 


Tim Van Damme 设计 ) 


> 


Can | haz semi- 


\ 


HNN 







transparent borders? 
Pretty please? 





图 2-2 
为 了 实现 半 透 明 边框 ， 我 们 最 开 
尝试 的 结 





2-3 
默认 状态 下 ， 背 景 会 延伸 到 边框 
的 区 域 下 层 


play.csssecrets.io/translucent-borders 


相关 规范 
http://w3.0org/TR/css-backgrounds 


3 Canl|haz semi- 


罗 transparent borders? 


Pretty please? 





图 2-4 
用 background-clip 来 修复 这 个 


问题 


box-shadow 的 基本 用 法 





难 匮 


回首 往事 ， 当 背景 与 边框 〈 第 三 版 ) (http:/w3.org/TR/css3-background ) 
还 在 草案 阶段 时 ，CSS 工作 组 内 部 有 过 很 多 讨论 ， 关 于 是 否 应 该 允许 多 重 边 
框 ， 就 像 多 重 否 景 那 样 。 不 滁 的 是 ， 当 时 一 人 致 认为 这 个 特性 并 没有 足够 多 的 
使 用 场景 ， 而 且 网 页 开发 者 还 可 以 使 用 border-image 来 达到 相同 的 效果 。 
然而 工作 组 忽略 了 一 点 : 我 们 通常 希望 在 CSS 代码 层面 以 更 灵活 的 方式 来 
调整 边框 样式 。 因 此 ， 网 页 开发 者 们 最 终 不 得 不 折腾 出 各 种 丑陋 的 hack， 比 
如 使 用 多 个 元 素来 模拟 多 重 边框 。 不 过 ， 我 们 还 有 更 好 的 办 法 来 解决 这 个 难 
里 ， 并 不 需要 添加 无 用 的 额外 元 素来 污染 我 们 的 结构 。 





box-shadow 方案 





日 前 为 止 ， 我 们 大 多 数 人 可 能 已 经 用 过 (或 滥用 过 ) box-shadow 来 生 
成 投影 。 不 太 为 人 所 知 的 是 ， 它 还 接受 第 四 个 参数 〈 称 作 “ 扩 张 半径 ”)， 通 
过 指定 正 值 或 负 值 ， 可 以 让 投影 面积 加 大 或 者 减 小 。 一 个 正 值 的 扩张 半径 加 








图 2-5 上 两 个 为 零 的 偶 移 量 以 及 为 去 的 模糊 什 ， 得 到 的 “投影 ”其 实 就 像 一 诞 实 线 
用 box-shadow 来 模拟 外 框 边框 (参见 图 2-5): 


第 2 章 背景 与 边框 


background: yellowgreen; 
box-shadow: 6 8 6 16px #655; 


这 并 没有 什么 了 不 起 的 ， 因 为 你 完全 可 以 用 border 属性 来 生成 完全 一 
样 的 边框 效果 。 不 过 box-shadow 的 好 处 在 于 ， 它 支持 逗号 分 隔 语法 ， 我 们 
可 以 创建 任意 数量 的 投影 。 因 此 ， 我 们 可 以 非常 轻松 地 在 上 面 的 示例 中 再 加 
上 一 道 国 Jeeppink 颜色 的 “边框 ”: 


background: yellowgreen; 
box-shadow: 6 6 6 16px #655, 60 6 6 15px deeppink; 


唯一 需要 注意 的 是 ，box-shadow 是 层 层 县 加 的 ， 第 一 层 投影 位 于 最 项 
层 ， 依 次 类 推 。 因 此 ， 你 需要 按 此 规律 调整 扩张 半径 。 比 如 说 ， 在 前 面 的 代 
码 中 ， 我 们 想 在 外 圈 再 加 一 道 5px 的 外 框 ， 那 就 需要 指定 扩张 半径 的 值 为 
15px (16px+5px)。 如 果 你 愿意 ， 甚 至 还 可 以 在 这 些 “ 边 框 ” 的 底下 再 加 一 
层 常 规 的 投影 : 





background: yellowgreen; 
box-shadow: 6 68 8 16px #655, 
0 6 0 15px deeppink, 
@ 2px 5px 15px rgba(6,6,6,.6); 


多 重 投 影 解 决 方案 在 绝 大 多 数 场合 都 可 以 很 好 地 工作 ， 但 有 一 些 注意 
事项 。 


国 投影 的 行为 跟 边 框 不 完全 一 致 ， 因 为 它 不 会 影响 布局 ， 而 且 也 不 会 
受到 box-sizing 属性 的 有 影响。 不 过 ， 你 还 是 可 以 通过 内 边 距 或 外 边 
距 ( 这 取决 于 投影 是 内 机 和 还 是 外 扩 的 ) 来 额外 模拟 出 边框 所 需要 
占据 的 空间 。 

国 ”上述 方法 所 创建 出 的 假 “ 边 框 ” 出 现在 元 素 的 外 圈 。 它 们 并 不 会 啊 
应 鼠标 事件 ， 比 如 惹 停 或 点 击 。 如 果 这 一 点 非常 重要 ， 你 可 以 给 
box-shadow 属性 加 上 inset 关键 字 ， 来 使 投影 绘制 在 元 素 的 内 圈 。 图 2-6 
请 注意 ， 此 时 你 需要 增加 额外 的 内 边 距 来 腾 出 足够 的 空 际 。 使 用 box-shadow 来 模拟 双 层 外 框 


play.csssecrets.io/multiple-borders 


outline 方案 











在 某 些 情 况 下 ， 你 可 能 只 需要 两 层 边框 ， 那 就 可 以 先 设置 一 层 和 常规 边 
框 ， 青 加 上 outline《〈 摘 边 ) 属性 来 产生 外 层 的 边框 。 这 种 方法 的 一 大 优 
点 在 于 边框 样式 十 分 灵活 ， 不 像 上 面 的 box-shadow 方案 只 能 模拟 实 线 边框 
(假设 我 们 需要 产生 虚线 边框 效果 ，box-shadow 就 没 皆 了 )。 如 果 要 得 到 图 图 2-7 


2-6 的 效果 ， 代 码 可 以 这 样 写 : 在 这 些 “ 外 框 ”下 再 添加 一 层 真 
实 的 投影 效果 





background: yellowgreen; 
border: 16px solid #655; 
outline: 5px solid deeppink; 


摘 边 的 另 一 个 好 处 在 于 ， 你 可 以 通过 outline-offset 属性 来 控制 它 跟 
元 素 边 绿 之 间 的 间距 ， 这 个 属性 甚至 可 以 接受 负 值 。 这 对 于 某 些 效果 来 说 非 
常 有 用 。 举 个 例子 ， 图 2-8 就 实现 了 简单 的 缝 边 效果 。 








2-8 

对 一 层 dashed ( 虚线 ) 描 边 使 用 。 这 个 方案 同样 也 有 一些 需 要 注意 的 地 方 。 

负 的 outline-offset 后 ， 可 以 | | 

得 到 简单 的 缝 边 效 果 于 如 上 所 述 ， 它 只 适用 于 双 层 “边框 ”的 场景 ， 因 为 outline 并 不 能 


接受 用 逗号 分 阳 的 多 个 值 。 如 果 我 们 需要 获得 更 多 层 的 边框 ， 前 一 
种 方案 就 是 我 们 唯一 的 选择 了 。 

图 边框 不 一 定 会 贴 合 border-radius 属性 产生 的 圆 角 ， 因 此 如 果 元 素 
是 圆 角 的 ， 它 的 描 边 可 能 还 是 直角 的 (参见 图 2-9)。 请 注意 ， 这 种 行 
为 被 CSS 工作 组 认为 是 一 个 bug， 因 此 未 来 可 能 会 改 为 贴 合 border- 
radius 圆 角 。 





图 2-9 四 根据 CSS 基本 UI 特性 (第 三 版 ) 规范 (http://w3.org/TR/css3-ui) 所 
ee 的 i 述 ,“ 描 边 可 以 不 是 矩形 ” 尽 省 在 绝 大 多 数 情况 下 ， 摘 边 都 是 矩形 
王 ” ~ 会 由 合 元 对 J 员 | ~ 过 AN、  、、 Y 一 TV 
9 人 ， 日 尔 相 文 个 者 十 王 S 上 只 号 完 救 
过 的 A 使 用 这 个 方法 ， 请 切记 : 最 好 在 不 同 浏览 右 中 完 
地 测试 最 终 效 果 。 


四 CSS 背景 与 边框 
http://w3.org/TR/css-backgrounds 相关 规范 


一 CSS 基本 UI 特性 
http://w3.0org/TR/css3-ul 








难题 


很 多 时 候 ， 我 们 想 针对 容 各 某 个 角 对 背景 图 片 做 偏 移 定位 ， 如 右 下 和 角 。 
在 CSS 2.1 中 ,我 们 只 能 指定 距离 左上 角 的 偏 移 量 ， 或 者 干脆 完全 徘 章 到 其 
他 三 个 角 。 但 是 ， 我 们 有 时 希望 图 片 和 容 从 的 边 角 之 间 能 留 出 一 定 的 空 际 
《类似 内 边 距 的 效 末 )， 以 免得 到 像 图 2-10 那样 的 效果 。 











对 于 具有 固定 尺寸 的 容器 来 说 ， 使 用 CSS 2.1 来 做 到 这 一 点 是 可 能 的 ， 
但 很 麻烦 : 可 以 基于 它 自 身 的 尺寸 以 及 我 们 期 望 它 距 离 右 下 角 的 偏 移 量 ， 计 
算出 背景 图 片 距离 左上 角 的 偏 移 量 ， 然 后 再 把 计算 结果 设置 给 background- 
position。 当 容器 元 素 的 尺寸 不 固定 时 《因为 内 容 往 往 是 可 变 的 )， 这 就 不 
可 能 做 到 了 。 网 页 开发 者 通常 只 能 把 background-position 设置 为 某 个 接 
近 100% 的 百分比 值 ， 以 便 近 似 地 得 到 想 要 的 效果 。 如 你 所 愿 ， 借 助 现 代 的 
CSS 特性 ， 我 们 已 经 拥有 了 更 好 的 解决 方案 ! 

















background-position 的 扩展 语法 方案 


在 CSS 背景 与 边框 〈 第 三 版 ) (http:/w3.org/TR/css3-background) 中 ， 
background-position 属性 已 经 得 到 扩展 ， 它 允许 我 们 指定 背景 图 片 距 离 任 
意 角 的 偏 移 量 ， 只 要 我 们 在 偏 移 量 前 面 指定 关键 字 。 举 例 来 说 ， 如 有 果 想 让 青 
景 图 片 跟 右边 绿 保 持 28px 的 偶 移 量 ， 同 时 跟 底 边 保 持 16px 的 俩 移 量 ， 可 以 
这 样 做 (结果 如 图 2-11 所 示 ) : 


background: url(code-pirate.svg) no-repeat #58a; 
background-position: right 286px bottom 16px; 


最 后 一 步 ， 我 们 还 需要 提供 一 个 合适 的 回 退 方案 。 因 为 对 上 述 方案 来 
说 ， 在 不 文 持 background-position 坟 展 语法 的 浏览 硕 中 ， 背 景 图 片 会 紧 
贴 在 左上 角 【〈 背 景 图 片 的 默认 位 置 )。 这 看 起 来 会 很 奇怪 ， 而 且 它 会 干扰 到 
文字 的 可 读 性 (参见 图 2-12)。 提 供 一 个 回 退 方案 也 很 简单 ， 束 是 把 老 套 的 
bottom right 定位 值 写 进 background 的 人 简写 属性 中 : 

background: url(code-pirate.svg) 


no-repeat bottom right #58a; 
background-position: right 26px bottom 16px; 


play.csssecrets.io/extended-bg-position 


background-origin 方案 


在 给 背景 图 片 设置 距离 某 个 角 的 仿 移 量 时 ， 有 一 种 情况 极其 常见 ， 仿 移 
量 与 容 带 的 内 边 距 一 致 。 如 果 采 用 上 面 提 到 的 background-position 的 扩 
展 二 法 方案 ， 代 但 看 起 来 会 是 这 样 的 : 

padding: 16px; 


background: url(code-pirate.svg) no-repeat #58a; 
background-position: right 16px bottom 16px; 


我 们 可 以 在 图 2-13 中 看 到 结果 。 如 你 所 见 ， 它 起 作用 了 ， 但 代码 不 够 
DRY: 每 次 改动 内 边 距 的 值 时 ， 我 们 都 需要 在 三 个 地 方 更 新 这 个 值 ! 谢 天 谢 





Code Pirate 


{} 


background-position: bottom 
right; 通常 不 会 产生 在 审美 上 让 
人 非常 舒服 的 结果 ， 因 为 图 片 跟 
容器 的 边缘 之 间 没 有 空隙 


Code Pirate 





图 2-11 

我 们 可 以 指定 距离 其 他 各 边 的 偏 
移 量 ; 为 了 更 清楚 地 看 到 偏 移 是 
怎么 工作 的 ， 背 景 图 片 的 外 圈 加 
了 一 层 虚线 杠 





图 2-12 
如 果 我 们 不 希望 旧版 浏览 器 的 用 
户 看 到 这 个 结果 ， 还 需要 指定 一 
个 回 退 方案 


Code Plrate 





图 2-13 
对 背景 图 片 应 用 的 偏 移 量 往往 跟 
内 边 距 的 值 正好 一 至 


Border Box 
Padding Box 


Content Box 
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盒 模 型 





地 ， 还 有 一 个 更 简单 的 办 法 可 以 实现 这 个 需求 : 让 它 上 自动 地 跟着 我 们 设 定 的 
内 边 距 走 ， 不 用 为 外 声明 仿 移 量 的 值 。 


在 网 页 开发 生涯 中 ， 你 很 可 能 多 次 写 过 类 似 background-position: 
top left; 这 样 的 代码 。 你 是 否 曾经 有 过 疑惑 : 这 个 top 1left 到 底 是 哪 
个 左上 角 ? 你 可 能 知道 ， 每 个 元 素 身 上 都 存在 三 个 矩形 框 〈 人 参见 图 2-14) : 
border box (边框 的 外 沿 框 )、padding box〈 内 边 距 的 外 沿 框 )》 和 content box 
(内 容 区 的 外 沿 杠 )。 那 background-position 这 个 属性 指定 的 到 瓜 是 哪个 
矩形 框 的 左上 角 ? 


默认 情况 下 ，background-position 是 以 padding box 为 准 的 ， 这 样 边 
框 才 不 会 庶 住 背景 图 片 。 因 此 ，top left 默认 指 的 是 padding box 的 左上 
角 。 不 过 ， 在 背景 与 边框 (第 三 版 )(http://w3.org/TR/css3-background) 中 ， 
我 们 得 到 了 一 个 新 的 属性 background-origin， 可 以 用 它 来 改变 这 种 行为 。 
在 默认 情况 下 ， 它 的 值 是 〈 闭 者 眼睛 也 猜 得 到 ) padding-box。 如 果 把 它 的 
值 改 成 content-box( 参 见 下 面 的 代码 )， 我 们 在 background-position 属 
性 中 使 用 的 边 角 关 键 字 将 会 以 内 容 区 的 边缘 作为 基准 〈 也 就 是 说 ， 此 时 背景 
图 片 距离 边 角 的 仿 移 量 就 跟 内 边 距 保持 一 人 致 了 ): 














padding: 16px; 

background: url("code-pirate.svg") no-repeat #58a 
bottom right; /* 或 166% 166% */ 

background-origin: content-box; 





它 的 视觉 效果 跟 图 2-13 是 完全 一 样 的 ， 但 我 们 的 代码 变 得 更 加 DRY 
了 。 男 外 别 忘 了 ， 在 必要 时 可 以 把 这 两 种 技巧 组 合 起 来 ! 如 果 你 想 让 仿 
移 量 与 内 边 距 稍稍 有 些 不 同 ( 比 如 稍微 收敛 或 超出 )， 那 么 可 以 在 使 用 
background-origin: content-box 的 同时 ， 骨 通过 background-position 
的 扩展 语法 来 设置 这 些 和 额外 的 仿 移 量 。 


play.csssecrets,i0/backaround-onigir 


外 | 请 不 要 忘记 在 calc() 范 数 
内 部 的 - 和 + 运算 符 的 两 侧 各 加 
一 个 空白 符 ， 否 则 会 产生 解析 错 
误 ! 这 个 规则 如 此 怪异 ， 是 为 了 
向 前 兼容 : 未 来 ， 在 calc() 内 部 
可 能 会 人 多 证 使 用 关键 字 ， 而 这 些 
关键 字 可 能 会 包含 连 字 符 ( 即 减 


| | 
We 


calc() 方案 


让 我 们 回顾 一 下 本 市 开 尖 的 挑战 :把 背景 图 片 定位 到 距离 抵 边 16px 且 
距离 右边 26px 的 位 置 。 如 采 我 们 仍然 以 左上 角 偏 移 的 思路 来 考虑 ， 其 实 
就 是 希望 它 有 一 个 166% - 26px 的 水 平 侦 移 量 ， 以 及 186% - 16px 的 重阳 
但 移 量 。 谢 天 谢 地 ，calc() 函数 允许 我 们 执行 此 类 运算 ， 它 可 以 完美 地 在 
background-position 属性 中 使 用 : 





background: url("code-pirate.svg") no-repeat; 
background-position: calc(166% - 26px) calc(166% - 16px); 


play.csssecrets.io/background-position-calc 


四 CSS 背景 与 边框 
http://w3.org/TR/css-backgrounds 


国 CSS 值 与 单位 
http://w3.org/ 工 R/css-values 





边框 内 圆 角 





box-shadow，outline,“ 多 重 边 框 ” 





难题 


有 时 我 们 需要 一 个 容 般 ， 只 在 内 侧 有 圆 角 ， 而 边框 或 摘 边 的 四 个 角 在 外 
部 仍然 保持 直角 的 形状 ， 如 图 2-15 所 示 。 这 是 一 个 有 趣 的 效 末 ， 目 前 还 没 
有 被 滥用 。 用 两 个 元 素 可 以 实现 这 个 效 来 ， 这 并 没有 什么 特别 的 : 


<div class="something-meaningful"><div> 
I have a nice subtle inner rounding， 
don't I look pretty? 

</div></div> 


.Something-meaningful { 
background: #655; 
padding: .8em; 

} 


.Something-meaningful > div { 
background: tan; 
border-radius: .8em; 
padding: 1em; 


| have a nice subtle inner 


rounding, don't | look pretty? 





图 2-15 
容器 外 围 有 一 道 边框 ， 但 只 在 内 
侧 有 圆 角 





4 ”边框 内 圆 角 


Im a sad element because my 


outline doesn't get along with 


my round corners :-( 





图 2-16 
对 一 个 有 圆 角 的 元 素 使 用 out1i- 
ne 属性 


Im ahappy element, because 
my fake outline gets along 
with my round corners :-) 





图 2-17 

对 一 个 有 圆 角 的 元 素 使 用 没有 
偏 移 量 、 没 有 模糊 效果 的 box- 
shadow 属性 


| have a nice subtle inner 


rounding, don't | look pretty? 





2-18 

为 了 事情 的 真相 看 起 来 更 清楚 ， 
我 们 把 描 边 显示 为 黑色 ， 把 投影 
显示 为 品 红 色 ; 请 注意 描 边 是 给 


制 在 上 层 的 





二 为 什么 说 这 个 方法 有 点 
hack 的 味道 ?因为 它 依赖 于 描 
边 不 跟着 圆 角 走 的 这 个 事实 ， 但 
我 们 无 法 保证 这 种 行为 是 永远 不 
变 的 。 当 前 的 规范 在 描 边 的 绘制 
方面 给 了 浏览 器 非常 多 的 余地 ， 
但 根据 CSS 工作 组 最 近 的 讨论 
来 看 ， 未 来 规范 将 会 明确 地 建议 
描 边 跟着 圆 角 走 。 浏 览 器 是 否 会 
遵从 这 个 决定 ， 我 们 到 时 候 就 知 
道 了 。 








这 个 方法 很 好 ， 但 要 求 我 们 使 用 两 个 元 素 ， 而 我 们 只 需要 一 个 元 素 。 有 
没有 办 法 可 以 只 用 一 个 元 系 达 成 同样 的 效果 呢 ? 


解决 方案 


其 实 上 述 方案 要 更 加 灵活 一 些 ， 因 为 它 允 许 我 们 充分 运用 背景 的 能 力 。 
举 个 例子 ， 如 果 我 们 希望 这 一 圈 “ 边 框 ” 不 只 是 纯色 的 ， 而 是 要 加 一 层 淡淡 
的 纹理 ， 它 也 可 以 很 容易 地 做 到 。 不 过 ， 如 果 只 需要 达成 简单 的 实 色 效 果 ， 
那 我 们 就 还 有 另 一 条 路 可 走 ， 只 需 用 到 一 个 元 素 《〈 但 这 个 办 法 有 一 些 hack 
的 味道 )。 我 们 来 看 看 以 下 CSS 代码 : 














background: tan; 
border-radius: .8em; 
padding: 1em; 

box-shadow: 6 8 8 .6em #655; 
outline: .6em solid #655; 





你 能 猿 到 视觉 效果 是 怎样 的 吗 ? 它 产生 的 效果 正如 图 2-15 所 示 。 我 们 
基本 上 受益 于 两 个 事实 : 描 边 并 不 会 跟着 元 素 的 圆 角 走 《因而 显示 出 直角 ， 
参见 图 2-16)， 但 box-shadow 却 是 会 的 〈 参 见 图 2-17)。 因 此 ， 如 果 我 们 
把 这 两 者 若 加 到 一 起 ，box-shadow 会 刚好 填补 摘 边 和 容 融 圆 角 之 间 的 空 陀 ， 
这 两 者 的 组 合 达 成 了 我 们 想 要 的 效果 。 图 2-18 把 投影 和 描 边 显示 为 不 同 的 
颜色 ， 从 而 在 视 党 上 提供 了 更 清晰 的 解释 。 


请 注意 ， 我 们 为 box-shadow 属性 指定 的 扩张 值 并 不 一 定 等 于 描 边 的 筑 
度 ， 我 们 只 需要 指定 一 个 足够 填补 “ 空 除 ”的 扩张 值 就 可 以 了 。 事 实 上 ， 指 
定 一 个 等 于 摘 边 宽度 的 扩张 值 在 某 些 浏 览 需 中 可 能 会 得 到 泻 染 异常 ， 因 此 我 
推 存 一 个 稍 小 些 的 值 。 这 又 引出 了 另 一 个 问题 : 到 底 多 大 的 投影 扩张 值 可 以 
填补 这 些 空 阶 呢 ? 

为 了 解答 这 个 问题 ， 我 们 需要 回忆 起 中 学 时 学 过 的 勾 股 定理 ， 用 来 计算 
直角 三 角形 各 边 的 长 度 。 勾 股 定 理 表 明 ， 如 果 直 角 边 分 别 是 a 和 2， 则 冬 边 
( 正 对 着 直角 的 最 长 边 ) 等 于 Vaz +b* 。 当 两 条 直角 边 的 长 度 相 等 时 ， 这 个 
算式 会 演化 为 V2a2 = avV2 。 

你 可 能 还 很 纳 浆 ， 中 学 几何 到 底 是 怎么 跟 我 们 的 内 圆 角 效果 扯 上 关系 
的 ? 关于 怎样 用 它 来 计算 我 们 需要 的 最 小 扩张 值 ， 请 看 图 2-19 中 图 形 化 
的 解释 。 在 我 们 的 例子 中 ，border-radius 是 .8em， 那 么 最 小 的 扩张 值 就 
是 0.8 (V2 一 1) x 0.331 370 85 em 。 我 们 要 做 的 就 是 把 它 稍微 向 上 取 个 整 ， 
把 .34em 设置 为 投影 的 扩张 半径 。 为 了 避免 每 次 都 要 计算 ， 你 可 以 直接 使 用 
圆 角 半径 的 一 半 ， 因 为 V2 ~-1< 0.5 。 

请 注意 ， 该 计算 过 程 揭示 了 这 个 方法 的 另 一 个 限制 ， 为 了 让 这 个 效果 得 
以 达成 ， 扩 张 半 径 需 要 比 描 边 的 宽度 值 小 ， 但 它 同时 又 要 比 (V2 -Dr 大 【这 









































里 的 > 表示 border-radius)。 这 意味 着 ， 如 果 描 边 的 宽度 比 (V2 -Dr 小， 
那 我 们 是 不 可 能 用 这 个 方法 达成 该 效果 的 。 


Se play.csssecrets.io/inner-rounding 


四 CSS 背景 与 边框 
http://w3.org/TR/css-backgrounds 相关 规范 


国 CSS 基本 UI| 特性 





http://w3.0org/TR/css3-ul 





CSS 线性 渐变 ，background-size 





难题 


不 论 是 在 网 页 设计 中 ， 还 是 在 其 他 传统 媒介 中 比如 桨 志和 增 纸 等 )， 
各 种 尺寸 、 颜 色 、 角 度 的 条 纹 图 案 在 视觉 设计 中 无 处 不 在 。 要 想 在 网 页 中 实 
现 条 纹 图 案 ， 其 过 程 还 远 远 不 够 理想 。 通 常 ， 我 们 的 方法 是 创建 一 个 单独 的 
位 图 文件 ， 然 后 每 次 知 要 做 些 调 整 时 ， 痢 用 图 像 编 辑 侣 来 修改 它 。 可 能 有 人 
试 过 用 SVG 来 取代 位 图 ， 但 这 样 还 是 会 有 一 个 独立 的 文件 ， 而 且 它 的 语法 
也 远 远 不 够 友好 。 如 果 可 以 直接 在 CSS 中 创建 条 纹 图 案 ， 那 该 有 多 棒 啊 ! 
你 可 能 会 惊讶 地 发 现 ， 我 们 居然 真 的 可 以 。 


解决 方案 


假设 我 们 有 一 条 基本 的 垂直 线性 渐变 ， 颜 色 从 于 #fb3 过 渡 到 国 #58a 
(参见 图 2-20) : 











图 2-19 

当 我 们 的 圆 角 半径 是 x 时， 从 圆 
角 的 圆心 到 描 边 项 角 的 长 度 就 是 
rV2 ， 这 意味 着 投影 的 扩张 值 不 
能 小 于 rV2 -=(V2 -TDr 





图 2-20 
我 们 的 起 点 





图 2-21 

渐变 现在 出 现在 总 高 的 60% 区 
域 ， 剩 下 的 部 分 显示 为 实 色 ; 色 
标的 位 置 用 虚线 标示 出 来 了 





图 2-22 

渐变 现在 出 现在 总 高 的 20% 区 
域 ， 剩 下 的 部 分 显示 为 实 色 ; 色 
标的 位 置 用 虚线 标示 





2-23 
两 个 色 标 现在 都 设 为 50% 了 

















上 一 = = = 





2-24 
在 没有 平 铺 的 情况 下 ， 我 们 生成 


的 背景 是 这 样 的 





2-25 
最 终 的 水 平 条 纹 效果 





background: linear-gradient(#fb3, #58a); 
现在 ， 让 我 们 试 着 把 这 两 个 色 标 拉 近 一 点 (参见 图 2-21) : 
background: linear-gradient(#fb3 26%, #58a 862% ) ; 


现在 容器 顶部 的 20% 区 域 被 填充 为 辆 #fb3 实 色 ， 而 底部 20% 区 域 被 
填充 为 国 #58a 实 色 。 真 正 的 渐变 只 出 现在 容器 60% 的 高 度 区 域 。 如 果 我 们 
把 两 个 色 标 继续 拉 近 《分 别 改 为 46% 和 68%， 人 参见 图 2-22)， 那 真正 的 渐变 
区 域 就 变 得 更 罕 了 。 你 是 不 是 开始 好 奇 ， 如 朱 我 们 把 两 个 色 标 重合 在 一 起 ， 
会 发 生 什么 ? 


background: linear-gradient(#fb3 56%, #58a 56%) ; 


“如 果 多 个 色 标 具有 相同 的 位 置 ， 它 们 会 产生 一 个 无 限 小 的 过 渡 区 域 ， 
过 渡 的 起 止 色 分 别 是 第 一 个 和 最 后 一 个 指定 值 。 从 效果 上 看 ， 颜 色 会 在 那 
个 位 置 突然 变化 ， 而 不 是 一 个 平滑 的 渐变 过 程 。?” 


一 一 CSS 图 像 〈( 第 三 版 〉(http://w3.org/TR/css3-images) 


你 在 图 2-23 中 可 以 看 到 ， 已 经 没有 任何 渐变 效果 了 ， 只 有 两 块 实 色 ， 
各 占据 了 background-image 一 半 的 面积 。 本 质 上 ， 我 们 已 经 创建 了 两 条 巨 
大 的 水 平 条 纹 。 


因为 渐变 是 一 种 由 代码 生成 的 图 像 ， 我 们 能 像 对 待 其 他 任何 背景 图 像 那 
样 对 待 它 ， 而 且 还 可 以 通过 background-size 来 调整 其 尺寸 : 





background: linear-gradient(#fb3 56%, #58a 56% ) ; 
background-size: 166% 36px ; 


在 图 2-24 中 可 以 看 到 ， 我 们 把 这 两 条 条 纹 的 高 度 都 缩小 到 了 15px。 由 
于 背景 在 默认 情况 下 是 重复 平 铺 的 ， 整 个 容器 其 实 已 经 被 填 满 了 水 平 条 纹 
(参见 图 2-25 )。 


我 们 还 可 以 用 相同 的 方法 来 创建 不 等 宽 的 条 纹 ， 只 需 调整 色 标的 位 置 值 
即 可 〈 人 参见 图 2-26 ) : 





background: linear-gradient(#fb3 36%, #58a 362% ) ; 
background-size: 166% 36px ; 





为 了 避免 每 次 改动 条 纹 宽度 时 都 要 修改 两 个 数字 ， 我 们 可 以 再 次 从 规范 
那里 找到 捷径 。 


“如 果菜 个 色 标 的 位 置 值 比 整个 列表 中 在 它 之 前 的 色 标 的 位 置 值 都 要 
小 ， 则 该 色 标 的 位 置 值 会 被 设置 为 它 前 面 所 有 色 标 位 置 值 的 最 大 值 。” 


一 一 CSS 图 像 (第 三 版 〉(http://w3.org/TR/css3-images) 


这 意味 春 ， 如 采 我 们 把 第 二 个 色 标 的 位 置 值 设置 为 6， 那 它 的 位 置 就 
总 是 会 被 浏览 胡 调 整 为 前 一 个 色 标 的 位 置 值 ， 这 个 结 末 正 是 我 们 想 要 的 。 
因此 ， 下 面 的 代码 会 产生 跟 图 2-26 完全 一 样 的 条 纹 背景 ， 但 代码 会 更 加 
DRY : 


background: linear-gradient(#fb3 36%, #58a 0) | 
background-size: 166% 36px; 


如 采 要 创建 超过 两 种 颜色 的 条 纹 ， 也 是 很 容易 的 。 举 例 来 说 ， 下 面 的 代 
码 可 以 生成 三 种 颜色 的 水 平 条 纹 〈 人 参见 图 2-27 ) : 
background: linear-gradient(#fb3 33.3%, 


#58a 0, #58a 66.6%, yellowgreen 0); 
background-size: 166% 45px; 


play.csssecrets.io/horizontal-stripes 


垂直 条 级 


水 平 条 纹 是 最 容易 用 代码 写 出 来 的 ， 但 我 们 在 网 页 上 看 到 的 条 纹 图 案 并 
不 都 是 水 平 的 。 有 些 条 纹 是 垂直 的 (参见 图 2-28)， 而 且 某 些 形态 的 斜 条 纹 
或 许 更 受 欢 迎 ， 或 者 看 起 来 更 加 有 趣 。 幸 运 的 是 ，CSS 渐变 同样 也 能 帮助 我 
们 创建 出 这 些 效果 ， 只 是 难度 稍 有 不 同 。 

垂直 条 纹 的 代码 跟 水 平 条 纹 儿 乎 是 一 样 的， 差别 主要 在 于 : 我 们 需要 在 
开头 加 上 一 个 额外 的 参数 来 指定 渐变 的 方向 。 在 水 平 条 纹 的 代码 中 ， 我 们 其 
实 也 可 以 加 上 这 个 参数 ， 只 不 过 它 的 默认 值 to bottom 本 来 就 跟 我 们 的 意 
图 一 致 ， 于 是 束 省 略 了 。 最 后 ， 我 们 还 需要 把 background-size 的 值 题 倒 
一 下 ， 原 因应 该 不 用 多 说 了 吧 : 

background: linear-gradient(to right, /* 或 96deg */ 


#fb3 56%, #58a 6 ) ; 
background-size: 36px 166%; 


play.csssecrets.io/vertical-stripes 


科 回 条 纹 


在 完成 了 水 平和 垂直 条 纹 之 后 ， 我 们 可 能 会 顺 着 往 下 想 : 如 果 我 们 再 次 
改变 background-size 的 值 和 渐变 的 方 辐 ， 是 不 是 就 可 以 得 到 和 斜 问 (比如 
45°) 的 条 纹 图 案 呢 ?比如 这 样 (结果 如 图 2-29 所 示 ) : 


background: linear-gradient(45deg, 





2-26 
不 等 宽 的 条 纹 图 案 





图 2-27 
有 三 种 颜色 的 条 纹 图 案 











2-28 
我 们 的 垂直 条 纹 。 上 图 : 还 没有 


平 铺展 开 的 单个 贴 片 ， 下 图 : 平 
铺 得 到 的 条 纹 图 案 





2-29 
我 们 对 于 斜 向 条 纹 的 首次 党 试 失 
败 了 


#fb3 56%, #58a 0); 
background-size: 36px 36px ; 


可 以 发 现 , 这 个 办 法 行 不 通 。 原 因 在 于 我 们 只 是 把 每 个 “ 贴 片 ” “内 部 的 
浙 变 旋转 了 45%， 而 不 是 把 整个 重复 的 背景 都 旋转 了 。 试 着 回忆 一 下 我 们 以 
前 用 位 图 来 生成 斜 向 条 纹 时 是 怎么 做 的 吧 ， 做 法 类 似 图 2-30。 单 个 贴 片 包 
图 2-30 含 了 四 条 条 纹 ， 而 不 是 两 条 ， 只 有 这 样 才 有 可 能 做 到 无 颖 拼接 。 它 正 是 我 们 


只 有 这 种 可 以 无 颖 拼接 的 图 像 才 -= 、 SA >、 人 1 HE A 3 
一 本 N Fini 站 册 9 增 一 些 YY 
Sh A ed i 需要 在 CSS 代码 中 重新 实现 的 贴 片 ， 因 此 我 们 需要 增加 一 些 色 标 








background: linear-gradient(45deg, 
#fb3 25%, #58a 606， #58a 560%， 
#fb3 0, #fb3 75%, #58a 0); 
background-size: 36px 38px; 


我 们 可 以 在 图 2-31 中 看 到 结果 。 如 你 所 见 ， 我 们 成 功 地 创建 了 斜 向 条 
纹 ， 但 这 些 条纹 看 起 来 要 比 我 们 在 前 面 制作 的 水 平和 垂直 条 纹 细 一 些 。 为 了 
图 2-31 理解 这 其 中 的 道理 ， 我 们 需要 再 次 回忆 起 在 学 校 里 学 过 的 勾 股 定理 ， 用 它 来 
我 们 得 到 的 45° 条 纹 ; 图 中 的 虚 ”计算 直角 三 角形 的 斜 边 长 度 。 这 个 定理 表示 ， 当 a 和 4b 是 直角 三 角形 的 直角 
牧 框 标示 是 了 举 个 贴 片 的 位 置 。 。 沪 时 ， 则 斜 边 的 长 度 等 于 Var+57 。 对 于 一 个 45° 的 直角 三 角形 来 说 ， 它 的 
两 条 直角 边 是 等 长 的 ， 因 此 这 个 算式 会 变 成 V24 = aV2 。 在 我 们 的 斜 向 条 纹 
中 ， 背 景 尺寸 指定 的 长 度 值 决 定 了 吉 角 三 角形 的 斜 边 长 度 ， 但 条 纹 的 宽度 实 
际 上 是 直角 三 角形 的 高 。 在 图 2-32 中 可 以 看 到 图 形 化 的 解释 。 


这 童 味 着 ， 如 有 果 想 让 条 纹 的 宽度 变化 为 我 们 原本 想 要 的 15px， 就 需要 























ee 把 background-size 指定 为 2x15V2 x 42.426 406 871 像素 : 
2-32 background: linear-gradient(45deg, 
背景 尺寸 设置 为 38px 时 , 产生 的 条 #fb3 25%, #58a 0@, #58a 56%， 
et pe #fb3 0, #fb3 75%, #58a 0); 
级 疯 和 将 是 记 从 background-size: 42.426466871px 42.426466871px; 


像素 

你 可 以 在 图 2-33 中 看 到 最 终 效 果 。 但 是 ， 除 非 有 人 拿 枪 顶 着 你 的 脑袋 
威胁 你 必须 把 斜 问 条 纹 的 宽度 设置 为 完全 精确 的 15 像素 ， 我 会 强烈 推荐 你 
把 这 一 长 串 数学 取 整 ， 写 成 42.4px， 或 者 甚至 是 42px。( 当 然 ， 在 上 述 情 
形 之 下 ， 你 还 是 会 被 干掉 。 因 为 V2 不 是 整数 ， 我 们 最 终 得 到 的 条 纹 宽 度 永 
远 都 只 能 是 一 个 近似 值 一 一 尽管 它 已 经 相当 精确 了 。) 





2-33 
我 们 最 终 得 到 的 45° 条 纹 ， 请 注 play.csssecrets.io/diagonal-stripes 
意 现在 条 纹 的 宽度 跟前 面 的 例子 

是 一 样 的 





更 好 的 斜 问 条 级 
在 前 面 的 段落 中 展示 的 方法 还 不 够 灵活 。 假 设 我 们 想 让 条 纹 不 是 45° 而 





由 原文 tle， 表 示 平 铺 图 案 中 的 每 个 基本 单元 。 一 一 译 者 注 


是 60° 怎 么 办 ? 或 者 是 30°? 又 或 者 是 3.141 592 653 5°? 如 果 我 们 只 是 把 渐 
变 的 角度 改 一 下 ， 那 么 结果 看 起 来 会 相当 糟糕 。( 比 如 在 图 2-34 中 ， 我 们 尝 
试 实现 60° 条 纹 ， 但 以 失败 告终 。) 


等 运 的 是 ， 我 们 还 有 更 好 的 方法 来 创建 竹 癌 条 纹 。 一 个 鲜 为 人 知 的 真 
相 是 linear-gradient() 和 radial-gradient() 还 各 有 一 个 循环 式 的 加 强 
版 : repeating-linear-gradient() 和 repeating-radial-gradient()。 
它们 的 工作 方式 跟前 两 者 类 似 ， 只 有 一 点 不 同 : 色 标 是 无 限 循 环 重复 的 ， 下 
到 填 满 整个 背景 。 下 面 是 一 个 重复 渐变 的 例子 (效果 参见 图 2-35) : 


background: repeating-linear-gradient(45deg, 
#fb3, #58a 38px); 


它 相 当 于 下 面 这 个 简单 的 线性 渐变 : 


background: linear-gradient(45deg, 
#fb3, #58a 36px， 
#fb3 306px, #58a 60pX， 
#fb3 60px, #58a 96px， 
#fb3 96px, #58a 1269px， 
#fb3 126px, #58a 156px,，...); 











重复 线性 渐变 完美 适用 于 一 一 你 已 经 猜 到 了 吧 一 一 条 纹 效 果 ! 这 得 益 于 
它们 可 以 无 限 循环 的 天 赋 ， 一 个 渐变 图 案 就 可 日 动 午 复 并 铺 满 整个 背景。 
此 ， 我 们 再 也 不 需要 去 操心 如 何 创 建 出 可 以 无 缝 拼接 的 贴 片 了 。 


作 个 对 比 ， 我 们 在 图 2-33 中 创建 的 效果 也 可 以 由 这 个 重复 渐变 来 生成 : 








background: repeating-linear-gradient(45deg, 
#fb3, #fb3 15px, #58a 60, #58a 38px); 


第 一 个 明显 的 好 处 就 是 减少 了 重复 : 我 们 要 改动 任何 颜色 时 只 需要 修改 
两 处 ， 而 不 是 原来 的 三 处 。 另 外 一 点 也 很 重要 ， 我 们 现在 是 在 新 变 的 色 标 中 
指定 长 度 ， 而 不 是 原来 的 background-size。 这 里 的 background-size 是 
初始 值 ， 对 族 变 来 说 就 是 以 整个 元 素 的 范围 进行 填充 。 这 意味 着 代码 中 的 长 
度 值 更 加 直观 ， 因 为 这 些 长 度 是 直接 在 渐变 轴 上 进行 度量 的 ， 直 接 代 表 了 条 
纹 自身 的 宽度 。 我 们 再 也 不 需要 计算 什么 V2 了 ! 

不 过 这 还 不 是 最 大 的 好 处 。 最 大 的 好 处 在 于 ， 现 在 我 们 可 以 随心 所 欲 
地 改变 渐变 的 角度 了 ， 指 哪儿 打 哪 儿 ， 再 也 不 需要 各 天 思索 如 何 生 成 一 个 
无 缝 贴 片 。 举 例 来 说 ， 我 们 兰若 追寻 的 60° 条 纹 只 需 这 样 写 即 可 (参见 图 
2-36 ) : 








background: Fepeating-1Linear-gradient(66deg， 
#fb3, #fb3 15px, #58a 6，#58a 36px) ; 


这 简单 到 只 需要 改 改 角度 就 可 以 了 ! 请 注意 ， 在 这 个 方法 中 ， 不 论 条 








2-34 
我 们 对 60。 条 纹 的 党 试 很 傻 很 天 
真 ， 失 败 了 





图 2-35 
一 个 重复 线性 渐变 图 案 





2-36 
我 们 终于 得 到 了 真正 的 60? 条 纹 





纹 的 角度 如 何 ， 我 们 在 创建 双色 条 纹 时 都 需要 用 到 四 个 色 标 。 这 意味 着 ， 我 
们 最 好 用 前 面 的 方法 来 实现 水 平 或 竺 二 的 条 纹 ， 而 用 这 种 方法 来 实现 料 回 条 
纹 。 夯 外 ， 在 处 理 45° 条 纹 时 ， 我 们 甚至 可 以 把 这 两 种 方法 结合 起 来 ， 本 质 
上 是 通过 重复 线性 渐变 来 简化 贴 刻 的 代码 : 














background: repeating-linear-gradient(45deg, 
#fb3 6@, #fb3 25%, #58a 60, #58a 56%) ; 
background-size: 42.426466871px 42.426466871px; 


ee 


灵活 的 同色 系 条 纹 


在 大 多 数 情况 下 ， 我 们 想 要 的 条 纹 图 案 并 不 是 由 差异 极 大 的 几 种 颜色 组 
成 的 ， 这 些 颜 色 往往 属于 同一 色 系 ， 只 是 在 明度 方面 有 着 轻微 的 差异 。 举 个 
例子 ， 我 们 来 看 看 这 个 条 纹 图 案 : 














background: repeating-linear-gradient(38deg, 


| 
#79b, #79b 15px, #58a 8, #58a 38px); 


图 2-37 
这 个 条 纹 是 由 蓝 色 及 其 浅 色 变 体 在 图 2-37 中 可 以 看 到 ， 条 纹 是 由 一 个 主 色调 〈 国 #58a) 和 它 的 浅 色 
所 组 成 的 变 体 所 组 成 的 。 但 是 ， 这 两 种 颜色 之 间 的 关系 在 代码 中 并 没有 体现 出 来 。 此 


外 ， 如 采 我 们 想 要 改变 这 个 条 纹 的 主 色 调 ， 甚 至 再 要 修改 四 处 ! 

征 运 的 是 ， 还 有 一 种 更 好 的 方法 : 不 再 为 每 种 条 纹 单 独 指定 颜 色 ， 而 是 
把 最 深 的 颜色 指 定 为 背景 色 ， 同 时 把 半 透 明日 色 的 条 纹 合 加 在 背景 色 之 上 来 
得 到 浅 色 条 纹 : 








根据 CSS 图 像 (第 四 版 ) ( http://w3.org/TR/css4-images ) 计划 新 增 的 一 个 简化 语法 来 看 ， 很 快 我 们 就 
TE 定 两 个 位 置 值 了 。 这 个 简写 语法 的 含义 相当 于 两 个 连续 的 色 标 具有 相同 的 颜色 和 不 
同 的 位 置 ， 这 个 特性 在 创建 渐变 图 案 时 是 十 分 有 用 的 。 举 个 例子 ， 用 这 个 新 语法 来 生成 图 2-36 中 的 和 斜 问 
条 纹 : 


background: repeating-linear-gradient(66deg, #fb3 86 15px, #58a 8 36pXx) ; 


这 样 的 代码 不 仅 更 加 简单 ， 而 且 显 然 是 更 加 DRY 的 颜色 值 再 也 不 需要 重复 了 ， 因 此 我 们 在 改动 颜色 时 
只 需要 修改 一 处 。 遗 憾 的 是 ， 在 我 写 书 的 当下 ， 还 没有 任何 浏览 右 支 持 这 个 特性 。 


IE 加 D1ay.csssecrets.io/test-color-stop-2positions 





background: #58a ; 

background-image: repeating-linear-gradient(386deg, 
hsla(0,06%,1060%, .1), 
hs1a(6,6%,166%, .1) 15px, 
transparent 96，transparent 36pX ) ; 


结果 看 起 来 跟 图 2-37 是 一 模 一 样 的 ， 但 我 们 现在 只 需要 修改 一 个 地 方 
就 可 以 改变 所 有 颜色 了 了。 我 们 还 得 到 了 一 个 额外 的 好 处 ， 对 于 那些 不 支持 
CSS 渐变 的 浏览 可 来 说 ， 这 里 的 至 景色 还 起 到 了 回 退 的 作用 。 不 仅 如 此 ， 在 
下 一 篇 攻略 中 我 们 还 将 看 到 ， 通 过 蕉 加 的 手法 ， 具 有 透明 区 域 的 多 个 渐变 图 
案 可 以 构造 出 非常 复杂 的 图 案 。 


play.csssecrets.io/subtle-stripes 


CSS 图 像 

http://w3.o0org/TR/css-images 
CSS 背景 与 边框 

http://w3.0org/TR/css-backgrounds 


CSS 图 像 (第 四 版 》 
http://w3.0org/TR/css4-1mages 


CSS 渐变 ，“ 条 纹 育 景 ” 





难题 


在 上 篇 攻略 中 ， 我 们 学 会 了 如 何 用 CSS 渐变 来 创建 各 种 条 纹 图 案 。 但 
是 条 纹 并 不 是 我 们 要 实现 的 唯一 背景 图 漆 ， 它 甚至 只 是 几何 图 案 中 最 简单 的 





一 种 。 我 们 还 需要 很 多 其 他 不 同类 型 的 图 案 ， 比 如 网 格 、 波 点 、 柄 盘 等 。 


对 和 运 的 是 ，CSS 渐变 在 实现 这 些 图 案 时 也 能 大 展 拳脚 。 用 CSS 渐变 
来 创建 任何 种 类 的 几何 图 案 儿 乎 都 是 可 能 的 ， 只 不 过 有 时 这 种 方法 不 太 实 
际 。 我 们 可 能 稍 不 留神 就 会 弄 出 一 大 块 无 法 维护 的 代码 。CSS 图 有 宁可 以 算 
是 一 个 值得 使 用 CSS 预 处 理 吉 (比如 Sass，http:/sass-lang.com) 来 减 
少 代 码 宛 余 的 案例 ， 因 为 最 终 图 案 越 复杂 ， 相 应 的 代码 就 会 变 得 越 来 越 不 
DRY 。 


在 本 篇 攻略 中 ， 我 们 将 深入 讨论 如 何 创 建 那 些 简 单 而 常用 的 图 案 。 


网 格 


只 使 用 一 个 渐变 时 ， 我 们 能 创建 的 图 案 并 不 多 。 当 我 们 把 多 个 渐变 图 
案 组合 起 来 ， 让 它们 透 过 彼此 的 透明 区 域 显 现时 ， 神 奇 的 事情 就 发 生 了 。 按 
照 这 个 思路 ， 我 们 首先 想到 的 可 能 就 是 把 水 平和 垂 生 的 条 纹 合 加 起 来 ， 从 而 
得 到 各 种 样式 的 网 格 。 举 例 来 说 ， 下 面 的 代码 会 创建 如 图 2-39 所 示 的 桌布 
( 方 格 纹 ) 图 案 。 














background: white; 
background-image: linear-gradient(98deg, 
rgba(266,9,96,.5) 56%, transparent 0), 
linear-gradient( 
rgba(260,60,0,.5) 56%, transparent 0); 
background-size: 36px 36px ; 


在 茶 些 情况 下 ， 我 们 希望 网 格 中 每 个 格子 的 大 小 可 以 调整 ， 而 网 格 线条 
的 粗细 同时 保持 固定 。 举 例 来 说 ， 类 似 图 纸 辅助 线 的 网 格 就 是 这 种 情况 。 这 
是 一 个 非 闸 好 的 例子 ， 展 示 了 使 用 长 度 而 不 是 百分比 作为 色 标 的 场景 : 





background: #58a; 
background-image: 
linear-gradient(white 1ipx, transparent 6)， 
linear-gradient(96deg, white 1ipx, transparent 0); 
background-size: 36px 36px ; 


re CSS3 Patterns Gallery 图 2-38 
Ceona potem to erpond «Touareas se eltabie « Bromer suppor Submitanewone « Github ep «Enjoy 我 的 CSS3 图 案 库 ( 位 于 lea. 
verou.me/css3patterns ) 展示 了 
CSS 渐变 早 在 2011 年 就 能 够 实 
现 的 效果 。 在 2011 年 到 2012 年 
间 ， 几 乎 每 篇 文章 、 每 本 书 、 每 
场 技 术 会 议 在 提 到 CSS 渐变 时 都 
会 提 到 这 个 图 案 库 ; 而 且 几 大 浏 
览 器 厂商 也 曾 用 它 来 调 校 自己 在 
CSS 渐变 上 的 实现 。 但 是 ， 并 不 
ne 例子 都 适用 于 生产 
环境 。 其 中 的 某 些 例子 只 是 用 来 
展示 可 能 性 ， 而 且 它 们 用 到 的 代 
码 极度 宛 长 繁琐 。 对 于 这 些 例子 
来 说 ，SVG 可 能 是 更 好 的 选择 。 
关于 SVG 图 案 的 演示 ， 请 访问 
philbit.com/svgpatterns， 这 个 网 
站 是 CSS 图 案 库 的 SVG 版 实现 
























我 们 得 到 的 结果 就 是 一 幅 用 1px 日 线 画 出 来 的 38px 大 小 的 网 格 图 案 
(参见 图 2-40)。 与 “灵活 的 同色 系 条 纹 ” 一 市 中 的 例子 类 似 ， 主 色调 在 这 
里 也 起 到 了 回 退 颜色 的 作用 。 


该 网 格 是 一 个 很 好 的 例子 ， 说 明 图 案 可 以 用 合理 的 、 可 维护 的 (尽管 
不 是 完全 DRY 的 ) CSS 代码 生成 。 


可 当 需 要 改变 网 格 的 太 寸 、 线 宽 或 者 任何 颜色 时 ， 我 们 可 以 很 容易 地 


找到 需要 编辑 的 地 方 。 我 们 的 桌布 ( 方 格 纹 ) 图 案 ， 是 


由 两 层 渐变 图 案 所 组 成 的 ( 按照 
四 在 改变 图 案 的 任何 一 个 要 素 时， 我 们 不 需要 做 大 量 的 修改 ， 而 是 只 。 惯 侈 ， 交 名 的 模 盘 图 案 凑 示 泛 明 














六 -一 


6 复杂 的 育 景 图案 








图 2-40 
一 幅 简单 的 蓝图 网 格 图 案 。 不 管 
每 个 格子 有 多 大 ， 它 的 线条 始终 


是 1px 





如 有 果 要 统计 你 的 CSS 代码 
的 文件 体积 ， 可 以 把 代码 粘贴 到 


byteslzematters.com。 





2-41 
一 个 更 加 复杂 的 蓝图 网 格 ， 由 两 
幅 不 同 参数 的 网 格 图 案 组 成 





2-42 
圆 点 阵列 ， 单 个 贴 片 用 虚线 框 标示 





图 2-43 
波 点 图 案 ， 两 层 背 景 图 案 各 自 的 
贴 片 分 别 用 虚线 框 标示 


第 2 革 背景 与 边框 


需 修 改 一 到 两 个 值 。 
是 代码 很 简短 ， 只 有 四 行 ， 共 计 170 字 节 。SVG 的 代码 不 见得 会 比 它 
更 短 。 
我 们 甚至 可 以 把 两 幅 不 同 线 宽 、 不 同 颜色 的 网 格 网 案 县 加 起 来 ， 得 到 一 
个 更 加 逼真 的 蓝图 网 格 〈 人 参见 图 2-41) : 








background: #58a ; 
background-image: 
linear-gradient(white 2px, transparent 6)， 
linear-gradient(96deg, white 2px, transparent 0), 
linear-gradient(hsla(6,86%,10606%, .3) 1px, 
transparent 6)， 
linear-gradient(96deg, hsla(6,6%,10606%,.3) 1px, 
transparent 0); 
background-size: 75px 75px, 75px 75pX， 
15px 15px, 15px 15px; 


play.csssecrets.io/blueprint 


波 所 


目前 为 止 ， 我 们 一 二 在 用 线性 渐变 生成 图 案 。 但 是 ， 径 回 渐 变 同 样 也 是 
非常 实用 的 ， 因 为 它 允 许 我 们 创建 圆 形 、 椭 圆 ， 或 是 它们 的 一 部 分 。 径 回 渐 
变 能 够 创建 的 最 简单 的 图 案 是 圆 点 的 阵列 《参见 图 2-42 ) : 








background: #655; 
background-image: radial-gradient(tan 386%, transparent 0); 
background-size: 36px 38px; 





坦白 地 说 ， 目 前 的 这 个 样子 还 不 是 很 实用 。 别 着 急 ， 我 们 可 以 生成 两 层 
圆 点 阵列 图 案 ， 并 把 它们 的 背景 定位 错开 ， 这 样 就 可 以 得 到 真正 的 波 点 图 案 
了 (参见 图 2-43 ) : 





background: #655; 

background-image: radial-gradient(tan 36%, transparent 6)， 
radial-gradient(tan 36%, transparent 0); 

background-size: 36px 36px ; 

background-position: 6 6，15px 15px; 


play.csssecrets.io/polka 


请 注意 ， 为 了 达到 效果 ， 第 二 层 背 景 的 偶 移 定位 值 必须 是 贴 片 宽 高 的 一 
半 。 不 对 的 是 ， 这 意味 着 如 果 要 改动 贴 片 的 太 寸 ， 需 要 修改 四 处 。 虽 然 可 能 
还 没 到 不 可 收拾 的 地 步 ， 但 这 样 的 代码 就 快要 跌 和 不 可 维护 的 次 调 。 如 有 果 你 
在 使 用 预 处 理 妖 ， 就 赶紧 把 它 转换 成 这 个 mixin 吧 : 


omixin polka($size, $dot, $base, $accent) { 
background: $base; 
background-image: 
radial-gradient($accent $dot, transparent 0), 
radial-gradient($accent $dot, transparent 0); 
background-size: $size $size; 
background-position: 6 60, $size/2 $size/2; 


) 





以 后 在 创建 渡 点 图 柔 时 ， 我 们 就 可 以 像 这 样 调用 它 : 


@include polka(36px, 36%, #655, tan); 


棋盘 图 案 在 很 多 场景 下 都 会 用 到 。 比 如 说 ， 相 对 于 单调 的 纯色 背景 
说 ， 具 有 细微 对 比 度 的 棋盘 图 案 可 能 就 是 一 个 有 趣 的 蔡 代 品 。 在 各 种 应 用 程 
序 的 界面 中 ， 灰 色 的 棋盘 网 案 已 经 是 用 于 表示 透明 色 的 事实 标准 。 在 CSS 中 
创建 棋盘 图 条 是 可 能 的 ， 只 不 过 实现 过 程 可 能 比 我 们 想像 中 的 要 “ 绕 ” 一 些 。 


棋盘 图 案 是 可 以 通过 平 铺 生 成 的 ， 平 铺 成 这 个 图 案 的 典型 贴 片 包含 两 种 
不 同 颜色 的 方块 ， 且 相互 间隔 ， 就 像 图 2-44 中 所 标示 出 的 那样 。 它 貌似 可 
以 在 CSS 中 很 容易 地 重 现 出 来 :只 需要 创建 两 个 不 同 背 景 定位 的 方块 就 可 
以 了 ， 没 错 吧 ?然而 并 非 如 此 。 是 的 ， 在 技术 上 ， 我 们 可 以 用 CSS 渐变 来 
创建 平 铺 的 方块 ， 但 每 个 方块 的 周围 是 不 会 有 空 际 的 ， 因 此 最 终 的 结果 看 起 
来 就 是 一 片 实 色 。 总 的 来 说 ， 只 用 一 层 CSS 渐变 无 法 创建 四 周 有 空 院 的 方 
块 。 如 果 你 对 此 还 怀 有 疑 议 ， 不 妨 找 找 看 有 没有 一 种 渐变 可 以 在 重复 平 铺 时 
产生 如 图 2-45 所 示 的 图 像 。 


这 里 的 筠 门 在 于 用 两 个 直角 三 角形 来 拼合 出 我 们 想 要 的 方块 。 我 们 已 经 
知道 了 如 何 创建 直角 三 角形 。( 还 记得 我 们 在 图 2-29 中 尝试 实现 料 癌 条纹 时 
所 遭遇 的 失败 四? ) 为 了 唤起 你 的 记忆 ， 我 们 再 来 看 看 当时 的 代码 《〈 这 里 换 
用 了 妃 一 种 颜色 和 透明 色 ) : 


























background: #eee; 
background-image: 

linear-gradient(45deg, #bbb 56%, transparent 0); 
background-size: 36px 38px; 











你 可 能 还 不 明白 这 个 方法 是 怎么 发 挥 作用 的 。 没 错 ， 如 果 我 们 尝试 直接 
用 两 个 三 角形 组 合 出 图 2-29 中 那样 的 正方 形 ， 可 能 只 会 得 到 一 片 实 色 。 但 
是 ， 如 果 我 们 把 这 些 三 角形 的 直角 边 缩短 到 原来 的 一 半 ， 从 而 只 占据 贴 片面 
积 的 寺 ， 而 不 是 了 ， 会 怎么 样 ? 要 满足 这 一 点 ， 我 们 只 需 简单 地 把 色 标的 位 
置 值 从 50% 改 为 25% 就 可 以 了 。 然 后 我 们 得 到 的 效果 会 如 图 2-46 所 示 。 

与 此 类 似 ， 如 果 我 们 把 色 标的 顺序 反 转 ， 就 可 以 创建 相反 方向 的 三 角形 
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图 2-44 
一 个 灰色 的 棋盘 图 案 通 常用 来 表 
示 透 明 色 ; 如 果 我 们 通过 图 片 的 
重复 平 铺 来 实现 它 ， 那 么 单个 贴 
片 应 该 就 是 虚线 框 所 标示 的 范围 


We 


司 二 一 一 一 一 


2-45 
四 周 有 空 阶 的 方块 在 平 铺 之 后 得 到 
的 结果 ; 单个 贴 片 用 虚线 框 标示 


2-46 
这 些 直 角 三 角形 的 四 周 有 很 多 


空隙 
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如 果 我 们 完全 凑 倒 色 标 的 顺序 ， 
就 能 得 到 相反 方向 的 三 角形 了 
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两 层 三 角形 图 案 组 合 之 后 的 效果 
> 
2-49 


这 两 组 三 角形 终于 拼合 成 了 一 组 
四 周 留 有 空 际 的 正方 形 图 案 ; 我 
们 用 虚线 框 标 出 了 两 个 贴 片 的 位 
置 ， 其 中 第 二 层 渐 变 还 特意 用 深 
色 凸 显 出 来 


(参见 图 2-47 ) : 


background: #eee ; 
background-image: 

linear-gradient(45deg, transparent 75%, #bbb 0); 
background-size: 36px 36pX; 


你 能 猜 到 把 它们 组 合 在 一 起 时 会 发 生 什么 吗 ? 代码 是 这 样 的 〈 结 果 如 图 
2-48 所 示 ) : 


background: #eee; 
background-image: 
linear-gradient(45deg, #bbb 25%, transparent 6)， 
linear-gradient(45deg, transparent 75%, #bbb 6 ) ; 
background-size: 36px 38px; 


乍 看 起 来 ， 这 样 的 效 琳 似乎 并 不 是 我 们 想 要 的 。 但 是 ， 我 们 只 需要 把 第 
二 层 渐变 在 水 平和 垂直 方向 均 移 动 贴 片 长 度 的 一 半 ， 就 可 以 把 它们 拼合 成 一 
个 完整 的 方块 : 


background: #eee ; 
background-image: 
linear-gradient(45deg, #bbb 25%, transparent 6)， 
linear-gradient(45deg, transparent 75%, #bbb 0); 
background-position: 6 60, 15px 15px; 
background-size: 36px 36px; 


你 能 猜 到 它 的 结 末 是 什么 样子 吗 ? 就 是 我 们 一 直 想 要 实现 的 效 末 ， 如 图 
2-49 所 示 。 请 注意 这 本 质 上 只 是 棋盘 的 一 半 。 要 把 它 转变 为 一 幅 完 整 的 棋 
盘 ， 我 们 只 需要 把 现 有 的 这 一 组 渐变 重复 一 份 ， 从 而 创建 出 另 一 组 正方 形 ， 
并 且 偶 移 它 们 的 定位 值 。 这 有 点 像 我 们 在 波 点 图 案 中 所 用 到 的 技巧 : 











background : #eee; 
background-image: 
linear-gradient(45deg, #bbb 25%, transparent 6)， 
linear-gradient(45deg, transparent 75%, #bbb 6)， 
linear-gradient(45deg, #bbb 25%, transparent 6)， 
linear-gradient(45deg, transparent 75%, #bbb 0); 
background-position: 6 6, 15px 15pX， 
15px 15px, 30px 36pxX 
background-size: 36px 38px; 





最 终结 果 就 是 一 幅 横 盘 图 和 案 ， 正 如 图 2-44 所 示 。 其 实 这 段 代码 还 可 以 
稍稍 优化 ， 比 如 我 们 可 以 把 这 些 处 在 贴 厂 项 角 的 三 角形 两 两 组 合 起 来 〈 即 把 
第 一 组 和 第 二 组 合并 为 一 层 渭 变 ， 把 第 三 组 和 第 四 组 合并 为 一 层 渐 变 )， 然 
后 还 可 以 把 这 灰 色 改 成 半 透 明 的 黑色 一 这样 我 们 只 需要 修改 左 色 就 可 以 改 
变 整 个 棋盘 的 色调 ， 不 需要 单独 调整 各 层 源 变 的 色 标 了 : 




















background: #eee; 
background-image: 








linear-gradient(45deg, 
rgba(6,0,96,.25) 25%, transparent 6， 
transparent 75%, rgba(0,06,06,.25) 6)， 
linear-gradient(45deg, 
rgba(6,9,9,.25) 25%, transparent 6， 
transparent 75%, rgba(0,06,06,.25) 0); 
background-position: 6 96，15pXx 15pX; 
ackground-size: 36px 36pXx; 


现在 我 们 把 四 层 渐 变 简 化 成 了 两 层 渐 变 ， 但 代码 仍然 跟 以 前 一 样 ”这 幅 图 案 本 身 就 比较 复杂 ， 而 且 
WET“。 为 了 改变 棋盘 的 主 色调 或 者 是 方 格 的 尺寸 ， 我 们 还 是 需要 修改 四 个 它 的 实现 原理 也 相当 复杂 ， 难 以 
> 虽 。 。 za 、 公 和 5 “其 是 去 ; 变 精 简 
地 方 。 在 这 一 点 上 ， 使 用 预 处 理 器 的 mixin 来 简化 代码 可 能 是 一 个 好 主意 。 天 人 和 全 人 人 全 下 


， 、 RE 为 两 层 时 。 因 此 ， 我 会 用 显眼 的 

某 个 色 标 ， 这 通常 有 助 于 理解 这 

checkerboard($size, $base, 个 图 案 是 如 何 构 成 的 。 举 例 来 

$accent: rgba(0,60,0,.25)) { 说 ， 这 里 的 第 一 层 渐变 是 用 图 

background: $base; rebeccapurple 来 展示 的 ， 不 是 

background-image: 半 透 明 的 黑色 ， 而 两 层 贴 片 也 都 
linear-gradient(45deg, 用 虚线 框 标示 出 来 了 


GO WET 的 意思 是 We Enjoy Typing (我们 喜欢 殴 键 盘 )， 是 DRY 的 反义词 。 它 表示 繁琐 重复 、 
无 法 维护 的 代码 。 





未 来 在 创建 棋盘 图 案 时 ， 我 们 再 也 不 需要 小 心 辟 翼 地 去 拼合 三 角形 了 。 
CSS 图 像 〈 第 四 版 ) (http://w3.org/TR/css4-images ) 定义 了 一 种 新 
的 渐变 形式 ， 可 以 生成 角 向 渐变 ( 也 称 作 圆锥 渐变 )。 这 种 渐变 的 效果 
通 章 看 起 来 像 是 一 个 俯视 的 圆锥 体 ， 因 此 得 名 。 它 们 的 生成 方式 是 这 
样 的 : 所 有 色 标 的 颜色 变化 是 由 一 条 射线 绕 着 冰点 旋转 来 推进 的 。 举 
个 例子 ， 以 下 渐变 代码 可 以 创建 一 个 色 轮 : 


background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); 


除了 色 轮 之 外 ， 角 辣 渐 变 在 很 多 地 方 都 大 有 用 武之 地 : 放射 状 的 光芒、 金属 拉丝 效果 ， 以 及 其 他 各 种 各 样 
的 育 景 ， 其 中 包括 ( 猜 对 了 ! ) 棋盘 图 案 。 我 们 只 需要 一 个 角 癌 渐变 就 可 以 实现 如 图 2-44 所 示 的 贴 片 了 : 


background: repeating-conic-gradient(#bbb 6, #bbb 25%, #eee 0@, #eee 56% ) ; 
background-size: 30px 38px; 


遗憾 的 是 ， 直 到 我 写作 的 此 刻 ， 还 没有 任何 浏览 器 支持 角 癌 渐变 ; 不 过 你 可 以 在 leaverou.github.io/conic- 
gradient 找到 一 个 polyfill。 
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$accent 25%, transparent 6， 
transparent 75%, $accent 6)， 
linear-gradient(45deg, 
$accent 25%, transparent 90, 
transparent 75%, $accent 0); 
background-position: 6 60, $size $size, 


background-size: 2*$size 2*$size, 


/* 调用 时 是 这 样 的 …… */ 
Qinclude checkerboard(15px, #58a, tan); 


在 任何 情况 下 ， 这 样 的 代码 量 都 不 能 算 少 ， 所 以 转 到 SVG 方案 可 能 是 
更 好 的 选择 。 图 2-44 中 的 贴 片 如 果 用 SVG 来 实现 ， 就 像 下 面 这 样 简 短 : 


<svg xmlns="http://www.w3.org/26000/svg" 
width="1660" height="166" fill-opacity=".25" > 
<rect x="50" width="506" height="50" /> 
<rect y="506" width="50" height="56" /> 


</Svg> 


可 能 有 人 会 说 :“ 可 是 CSS 渐变 能 省 掉 HTTP 请 求 啊 ! ”其 实 ， 对 于 现 
代 浏 览 需 来 说 ， 我 们 可 以 把 SVG 文件 以 data URI 的 方式 内 由 到 样式 表 中 ， 
甚至 不 需要 用 base64 或 URLencode 来 对 其 编码 : 











background: #eee url('data:image/svg+xml,\ 
<svg xmlns="http://www.w3.org/26600/svg" \ 
width="16060" height="106060" \ 
fill-opacity=" .25">\ 
<rect x="50" width="506" height="50" /> \ 
<rect y="5060" width="5060" height="506" /> \ 
</svg>'); 
background-size: 36px 38px; 





SVG 的 版 本 不 仅 少 了 40 个 字符 ， 而 且 在 代码 元 余 度 方面 也 明显 更 低 。 
举例 来 说 ， 我 们 在 改 颜 色 时 只 需要 改 一 处 ， 而 在 改 尺寸 时 只 需要 改 两 处 。 


et 


CSS 图 像 
http://w3.org/ 工 R/css-Images 

CSS 背 丸 与 边框 
http://w3.0org/TR/css-backgrounds 


可 缩放 矢量 图 形 (SVG) 
http://w3.0rg/TR/SVG 


CSS 图 像 (第 四 版 ) 


http://w3.0org/TR/css4-1mages 








请 注意 ， 如 果 你 出 于 可 读 性 
的 考虑 ， 需 要 把 一 句 CSS 代码 打 
断 为 多 行 ， 只 需要 用 反 矢 杠 (\) 
来 转 义 每 行 末 尾 的 换行 就 可 以 了 。 
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我 们 还 可 以 把 本 节 的 这 些 技巧 
和 混合 模式 (blending mode) 
( http://Ww3.org/TR/compositing—1 ) 
结合 起 来 。 当 我 们 对 组 成 图 案 
的 某 些 (或 所 有 ) 图 层 使 用 
background-blend-mode 属性 
并 设置 一 个 非 normal 值 时 ， 可 
以 产生 非常 有 趣 的 结果 ， 正 如 
Bennett Feely 的 图 案 库 ( http:// 
bennettfeely.comy/gradients ) 
所 示 。 这 些 图 案 大 多 只 使 用 了 
multiply 混合 模式 ， 但 其 他 
值 ( 比 如 overlay、screen 或 
difference ) 同样 也 是 非常 有 用 的 





到 CSS 


5 他 


css 6 











伪 随 机 背景 





CSS 渐变 ,， “条纹 育 景 ，“ 复 杂 的 育 景 图 案 ” 





难题 


重复 平 铺 的 几何 图 案 很 美观 ， 但 看 起 来 可 能 有 一 些 不 板 。 其 实 自然 界 
中 的 事物 都 不 是 以 无 限 平 铺 的 方式 存在 的 。 即 使 重复 ， 也 往往 伴随 春 多 样 
性 和 随机 性 。 比 如 花园 里 的 花 东 : 它们 因为 排列 整齐 而 生出 美感 ， 也 会 因 
为 和 各 错落 而 透 出 情趣 。 没 有 两 朱 花 是 完全 一 样 的 。 这 束 是 为 什么 当 我 们 
试图 让 背景 图 案 尽 可 能 显得 日 然 的 时 候 ， 往 往 会 想 办 法 让 人 完全 忽略 或 难 
以 察觉 平 铺 贴 片 之 间 的 “ 接 颖 ”而 这 一 点 又 与 我 们 保持 较 小 文件 体积 的 期 











望 生 接 冲 突 。 ge 
us 让 立 ~“ 凡 启 、 -让 、 />> 然 “会 以 “无 颖 ” 山 9 六 
“ 当 你 注意 到 一 个 有 辨识 度 的 特征 (比如 ， 术 纹 上 的 节 疤 ) 在 以 固定 ee 


的 规律 循环 重复 时 ， 那 它 试 图 营造 的 自然 随机 性 就 会 立刻 角 塌 。” 


一 一 Alex Walker, 《 蝉 原则 对 网 页 设计 的 重要 性 》(http://sitepoint.com/ 


the-cicada-principle-and-why-it-matters-to-web-designers) 


重 现 大 卓然 的 随机 性 是 一 个 挑战 ， 因 为 CSS 本 里 没有 提供 任何 随机 功 
能 。 让 我 们 以 条 纹 作 为 例子 吧 。 假 设 我 们 想得到 不 同 颜色 和 不 同 宽度 的 垂直 
条 纹 〈 方 便 起 见 ， 我 们 只 讨论 四 种 颜色 )， 并 且 不 能 让 人 看 出 由 片 平 铺 时 的 
“ 接 颖 ”。 我 们 的 第 一 个 想法 可 能 就 是 创建 一 个 具有 四 种 颜色 的 条 纹 图 案 : 





background: linear-gradient(98deg, 

#fb3 15%, #655 6@, #655 406%, 

#ab4 8, #ab4 65%, hsl(260, 46%, 906%) 8); 
background-size: 86px 166%; 





在 图 2-53 中 可 以 看 到 ， 这 个 重复 规律 是 非常 明显 的 ， 因 为 渐变 图 案 每 
隔 88px〈 即 background-size 的 值 ) 诫 会 复 重 一 次 。 有 更 好 的 办 法 吗 ? 





7 伪 随 机 苔 时 


图 2-53 

我 们 对 于 伪 随 机 条 纹 的 首次 党 
试 ， 是 用 单条 线性 渐变 来 生成 所 
有 颜色 
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我 们 的 第 二 次 党 试 ， 是 把 不 同 尺 
寸 的 渐变 图 案 亚 加 起 来 ， 平 铺 规 
律 仍然 是 有 迹 可 寻 的 ， 单 个 贴 片 
用 虚线 框 标示 


解决 方案 


为 了 更 真实 地 模拟 条 纹 的 随机 性 ， 我 们 接 下 来 可 能 会 想到 ， 把 这 组 条 纹 
从 一 个 平面 拆散 为 多 个 图 层 : 一 种 颜色 作为 底 色 ， 另 三 种 颜色 作为 条 纹 ， 然 
后 再 让 条 纹 以 不 同 的 间隔 进行 重复 平 铺 。 这 一 点 不 难 做 到 ， 我 们 在 色 标 中 定 
好 条 纹 的 宽度 ， 再 用 background-size 来 控制 条 纹 的 间距 。 代 码 看 起 来 可 
能 是 这 样 的 : 





background: hs1(26，46X%，962% ) ; 

background-image: 
linear-gradient(96deg, #fb3 16px, transparent 0), 
linear-gradient(96deg, #ab4 26px, transparent 0), 
linear-gradient(96deg, #655 26px, transparent 0); 

background-size: 86px 166%，66pXx 166%, 46px 166%; 


因为 最 顶层 贴 片 ”的 重复 规律 最 容易 被 察觉 〈 它 没有 被 任何 东西 遮挡 )， 


我 们 应 该 把 平 铺 间距 最 大 的 贴 片 安排 在 最 顶层 《在 我 们 的 例子 中 是 橙色 条 
纹 )。 








在 图 2-54 中 可 以 看 到 ， 这 样 的 结果 显明 更 有 随机 的 感 党 ， 但 如 果 仔 细 
观 罕 的话， 仍然 可 以 看 出 图 和 案 每 阳 246px 就 会 重复 一 次 。 这 个 组 合 图 案 中 第 
一 个 贴 片 的 终点 ， 就 是 各 层 背 景 图 像 以 不 同 间 距 重 复数 次 后 再 次 统一 对 齐 的 
点 。 让 我 们 再 次 穿越 回 初 中 数学 课堂 : 如 果 我 们 有 一 些 数 字 ， 那 么 可 以 同时 
整除 所 有 数字 的 最 小 数字 就 叫 作 它 们 的 最 小 公 倍 数 (LCM)。 因 此 ， 这 里 贴 
片 的 尺寸 实际 上 就 是 所 有 background-size 的 最 小 公 售 数 ， 而 40、60 和 80 
的 最 小 公 倍 数 正 是 240。 


由 请 注意 ,“ 贴 片 ” 这 个 词 在 这 里 是 比较 广义 的 。 它 不 仪 指 各 个 渐变 图 案 中 的 重复 单元 ， 还 泛 
指 多 层 渐变 合成 的 最 终 图 案 中 可 感知 的 重复 单元 。( 换 句 话 说 ， 如 果 我 们 用 的 不 是 多 重 背 景 
而 是 传统 的 背景 图 片 ， 那 么 这 个 平 铺 的 图 片 有 多 大 才能 达到 相同 的 效果 呢 ?) 








2-55 
我 们 最 终 的 条 纹 图 案 使 用 了 质数 ， 
从 而 增加 了 随机 的 真实 感 


根据 这 个 逻辑 ， 要 让 这 种 随机 性 更 加 真实 ， 我 们 得 把 贴 片 的 斥 寸 最 大 
化 。 感 谢 数学 ， 我 们 不 需要 吉 吉 思索 如 何 做 到 这 一 点 ， 因 为 我 们 已 经 知道 答 
案 了 。 为 了 让 最 小 公 倍 数 最 大 化 ,这些 数 字 最 好 是 “相对 质数 ”"。 在 这 种 情 
况 下 ， 它 们 的 最 小 公信 数 就 是 它们 的 乘积 。 淮 例 来 说 ，3、4 和 5 是 相对 质 
数 ， 因 此 它们 的 最 小 公 倍 数 就 是 3x4x5=60。 要 达成 相对 质数 ， 最 简单 的 办 
法 就 是 尽量 选择 质数 ， 因 为 质数 跟 其 他 任意 数字 都 是 相对 质数 。 在 网 上 可 以 
找到 质数 的 清单 ， 它 们 有 的 非常 大 。 


为 了 进一步 增加 随机 性 ， 我 们 甚至 可 以 用 质数 来 指定 各 组 条 纹 的 宽度 。 
于 是 我 们 的 代码 变 为 : 








background: hsl(206, 46%,，906%); 

background-image: 
linear-gradient(96deg, #fb3 11ipx, transparent 6)， 
linear-gradient(96deg, #ab4 23px, transparent 0), 
linear-gradient(96deg, #655 41px, transparent 0); 

background-size: 41px 166%, 61px 166%, 83px 1662% ; 


是 的 ， 我 们 的 代码 算 不 上 完美 ， 但 想 要 在 图 2-55 中 找到 任何 平 铺 接 缝 
可 不 容易 。 平 铺 贴 片 的 尺寸 现在 是 41x61x83=207 583 像素 ， 比 任何 我 们 所 
能 想像 出 的 屏 硕 分 辨识 部 要 大 ! 


这 个 技巧 被 Alex Walker 定名 为 “ 蝉 原则 ”他 最 先 提出 了 通过 质数 来 
增加 随机 真实 性 的 想法 。 请 注意 这 个 方法 不 仅 适 用 于 背景 ， 还 可 以 用 于 其 他 
涉及 有 规律 重复 的 情况 。 


国 在 照片 图 库 中 ， 为 每 幅 图 片 应 用 细微 的 伪 随 机 旋转 效果 时 ， 可 以 使 
用 多 个 :nth-child(a) 选择 从 ， 晶 让 a 是 质数 。 

加 如 果 要 生成 一 个 动画 ， 而 且 想 让 它 看 起 来 不 是 按照 明显 的 规律 在 
循环 时 ， 我 们 可 以 应 用 多 个 时 长 为 质数 的 动画 。( 可 以 在 play. 


csssecrets.io/cicanimation 看 到 一 个 示例 。) 


play.csssecrets.io/cicada-stripes 


G 质数 是 一 些 整数 ， 除 了 1 和 自身 之 外 ， 它 们 无 法 被 其 他 任何 数字 整除 。 举 例 来 说 ， 最 小 的 
10 个 质数 分 别 是 2、3、5、7、11、13、17、19、23 和 29。 另 一 方面 ， 相 对 质数 是 一 种 数字 
之 间 的 关系 ， 而 不 是 单个 数字 自身 的 属性 。 构 成 相对 质数 的 这 些 数字 没有 公约 数 ， 但 它们 自 
己 是 可 以 有 多 个 约 数 的 (比如 说 ，10 和 27 是 相对 质数 ， 但 它们 都 不 是 质数 )。 很 显然 ， 一 
个 质数 跟 其 他 所 有 数字 都 可 以 构成 相对 质数 。 





向 Alex Walker 脱 幅 致 效 ， 感 谢 他 在 《 蝉 原则 对 网 页 设计 的 重要 性 》 
(http:/www.sitepoint.com/the-cicada-principle-and-why-it-matters-to-web- 
designers) 一 文中 首次 提出 这 个 创意 ， 本 篇 攻略 正 是 这 了 它 的 启发 。Eric 
Meyer (http://meyerweb.com) 后 来 把 这 个 创意 应 用 到 了 CSS 渐变 所 生成 的 
公 敬 背景 图 像 上 ， 并 把 这 两 者 结合 的 产物 称 作 “ 蝉 渐 变 图 案 ”(http://meyerwetb. 
com/eric/thoughts/2012/06/22/cicadients)。Dudley Storey 也 为 这 个 概念 
写 了 一 篇 信息 量 很 大 的 文章 (http://demosthenes.info/blog/840/Brood-X- 
Visualizing-The-Cicada-Principle-In-CSS )。 





四 CSS 图 像 
http://w3.0org/TR/css-images 


可 CSS 背景 与 边框 
http://w3.org/TR/css-backgrounds 


CSS 渐变 ， 基 本 的 border-image,“ 条 纹 育 景 *"， 基 本 的 CSS 动画 





难 匮 


有 时 我 们 想 把 一 幅 图 案 或 图 片 应 用 为 边框 ， 而 不 是 背景 。 举 个 例子 ， 请 
看 图 2-57， 一 个 元 素 有 一 圈 装 饰 性 的 边框 ， 基 本 上 就 是 一 张 图 片 被 裁剪 进 
了 边框 所 在 的 方 环 区域 。 不 仅 如 此 ， 我 们 还 希望 这 个 元 素 的 尺寸 在 扩大 或 缩 
小 时 ， 这 幅 图 片 都 可 以 自动 延伸 并 覆盖 完整 的 边框 区 域 。 用 CSS 如 何 做 到 
这 一 点 呢 ? 

这 个 时 候 ， 你 的 脑子 里 可 能 会 有 一 个 声音 跳出 来 高 声 尖 叫 :“border- 


这 张 石雕 照 图 片 的 使 用 会 贯 串 本 image ! 用 border-image ! 只 要 有 border-image, 这 根本 就 不 是 一 个 问 
篇 攻略 题 ! ” 先 别 急 ， 年 轻 人 。 我 们 先 来 回忆 一 下 border-image 是 如 何 工作 的 。 











图 2-56 


第 2 革 背景 与 边框 


它 的 原理 基本 上 就 是 九宫 格 伸缩 法 : 把 图 斤 切 割 成 九 块 ， 然 后 把 它们 应 用 到 
元 素 边框 相应 的 边 和 角 。 关 于 它 的 工作 原理 ， 图 2-58 提供 了 图 形 化 的 解说 。 


如 何 用 border-image 切割 图 片 并 生成 图 2-57 中 的 效果 ?就 算 我 们 针 
对 特定 的 元 素 宽 高 和 边框 厚度 找到 了 切 制 位 置 ， 这 个 结果 也 无 法 适 配 尺寸 稍 
有 差异 的 其 他 元 素 。 问 题 在 于 ， 我 们 并 不 想 让 图 片 的 某 个 特定 部 分 固定 在 抽 
角 处 ;而 是 希望 出 现在 拐角 处 的 图 片区 域 是 随 着 元 素 宽 高 和 边框 厚度 的 变化 
而 变化 的 。 只 要 你 稍微 尝试 一 下 ， 就 会 立即 得 出 结论 : 这 用 border-image 
是 不 可 能 做 到 的 。 接 下 来 我 们 该 怎么 办 ? 

最 简单 的 办 法 是 使 用 两 个 HTML 元 素 : 一 个 元 素 用 来 把 我 们 的 石雕 图 
片 设 为 背景 ， 另 一 个 元 素 用 来 存放 内 容 ， 并 设置 纯 白 背景 ， 然 后 履 盖 在 前 者 
ad 本 
































<div class="something-meaningful"><div> 
I have a nice stone art border， 
don 七 look pretty? 

</div></div> 


.Something-meaningful { 
background: url(stone-art.jpg); 
background-size: Cover; 
padding: lem; 

} 


.Something-meaningful > div { 
background: white; 
padding: 1lem; 


这 个 方法 确实 可 以 生成 如 图 2-57 所 示 的 “边框 ”效果 ， 但 需要 一 个 和 额 
外 的 HTML 元 素 。 这 显然 不 够 理想 : 它 不 仅 把 结构 和 表现 混合 起 来 ， 而 且 
在 某 些 特定 场景 下 ， 修 改 HTML 是 根本 做 不 到 的 。 问 题 来 了 : 如 果 只 用 一 
个 元 素 ， 我 们 能 做 到 这 个 效果 吗 ? 


解决 方案 


感谢 背景 与 边框 (第 三 版 〉(http://w3.org/TR/css3-background) 引入 了 
对 CSS 渐变 和 背景 的 扩展 ， 使 得 我 们 只 用 一 个 元 素 就 能 达成 完全 一 样 的 效 
朵 。 主 要 的 思路 就 是 在 石雕 背景 图 片 之 上 ， 再 获 加 一 层 纯 白 的 实 色 背 景 。 为 
了 让 下 层 的 图 片 背 景 透 过 边框 区 域 显 示 出 来 ， 我 们 需要 给 两 层 痛 景 指定 不 同 
的 background-clip 值 。 最 后 一 个 要 点 在 于 ， 我 们 只 能 在 多 重 背 景 的 最 底 
层 设置 背景 色 ， 因 此 需要 用 一 道 从 日 色 过 渡 到 日 色 的 CSS 渐变 来 模拟 出 纯 
日 实 色 背 景 的 效果 。 


把 这 个 思路 转换 成 代码 之 后 ， 可 能 是 : 
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| have a nice stone art 


\ 


border, don't | look pretty? 
Bacon ipsum dolor amet 
fatback alcatra tenderloin 
chicken shank, sausage 


NN 





pork meatball leberkas tri- 
tip spare ribs salami filet 
mignon ball tip cow. 


图 2-57 
这 个 图 片 边框 在 高 度 变 化 时 的 情况 


Bacon ipsum dolor amet eu adipisicing clit 
tonguc ground round cx fatback proident 
kiclbasa ham hock. Sausage beef beef ribs aliquip 
t-bone mollit. Qnis beef tri-tip sunt, cupim ut 
magna salami t-bone. Ut laboris bresaola ribeye 


biltong landjaeger. Chuck pork belly sed sausage. 


Bacon ipsum dolor amet eu adipisicing elit 
tongue ground round ex fatback proident 
kielbasa ham hock. Sausage beef beef ribs aliquip 


t-bone mollit. Quis beef tri-tip sunt, cupim ut 


magna salami t-bone. Ut laboris bresaola ribeye 


biltong landjaeger. Chuck pork belly sed sausage. 





2-58 
关于 border-image 的 快速 入 门 。 


上 图 : 待 切 分 的 图 片 ， 图 中 的 虚 


线 表示 切割 线 

中 图 : border-image: 33.34% 
url(...) stretch; 

下 图 : border-image: 33.34% 
url(...) round; ( 你 可 以 在 
play.csssecrets.io/border-image 


体验 相关 代码 ) 





padding: 1em; 

border: 1lem solid transparent; 

background: linear-gradient(white, white), 
url(stone-art.jpg); 

background-size: cover.; 

background-clip: padding-box, border-box; 





正如 我 们 在 图 2-59 中 所 看 到 的 ， 这 个 结 采 跟 我 们 想 要 的 已 经 非常 接近 
了 。 但 边框 的 图 片 有 一 种 怪异 的 拼接 效果 。 原 因 是 background-origin 的 
默认 值 是 padding-box， 因 此 ， 图 片 的 显示 尺寸 不 仅 取决 于 padding box 的 
尺寸 ， 而 且 被 放置 在 了 padding box 的 原点 (左上 角 )。 我 们 看 到 的 实际 上 
就 是 背景 网 片 以 平 铺 的 方式 划 延 到 border box 区 域 的 效果 。 为 了 修正 这 个 问 
题 ， 只 需 把 background-origin 也 设置 为 border-box 束 可 以 了 : 








padding: 1em; 

border: 1lem solid transparent ; 

background: linear-gradient(white, white), 
url(stone-art.jpg); 

background-size: Cover; 

background-clip: padding-box, border-box; 

background-origin: border-box; 


这 些 新 属性 也 是 可 以 整合 到 background 这 个 简写 属性 中 的 ， 这 样 可 以 
显著 地 减少 代码 量 : 


padding: 1em; 

border: 1lem solid transparent; 

background: 
linear-gradient(white, white) padding-box, 
url(stone-art.jpg) border-box 6 / cover; 


S77 play.csssecrets.io/continuous-image-borders 






| have a nice stone art 






border, don't | look pretty? 


2-59 
首次 尝试 就 已 经 非常 接近 我 们 想 
要 的 效果 了 


当然 ， 这 个 技巧 还 可 以 用 在 渐变 图 案 上 。 举 个 例子 ， 下 面 这 段 代 人 码 可 以 
生成 一 种 老式 信封 样式 的 边框 : 


padding: lem; 
border: 1lem solid transparent; 
background: linear-gradient(white, white) padding-box, 
repeating-linear-gradient(-45deg, 
red 60, red 12.5%, 
transparent 8, transparent 25%, 
#58a 0@, #58a 37.5%, 
transparent 6060, transparent 58%) 
0 / 5em 5em; 


你 可 以 在 图 2-61 中 看 到 结果 。 你 可 以 很 容易 地 通过 background-size 
属性 来 改变 条 纹 的 宽度 ， 通 过 border 属性 来 改变 整个 边框 的 厚度 。 与 之 前 
的 石雕 边框 的 例子 不 同 ， 这 个 效果 也 可 以 通过 border-image 来 实现 : 








padding: 1lem; 

border: 16px solid transparent ; 

border-image: 16 repeating-linear-gradient(-45deg, 
red 0, red lem, 
transparent 60, transparent 2em， 
#58a 8，#58a 3em， 
transparent 868, transparent 4em); 


不 过 border-image 方法 存在 一 些 问 题 。 

加 每 当 我 们 改变 border-image-slice 时 ， 都 需要 同时 修改 border- 
width 来 让 它们 相互 匹配 。 

国 由 于 我 们 不 能 在 border-image-slice 属性 中 使 用 em 单位 ， 只 能 把 
边框 厚度 指定 为 像素 单位 。 


加 条 纹 的 宽度 需要 在 色 标 的 位 置信 息 中 写 好 ， 因 此 我 们 在 改变 条 纹 宽 
度 时 ， 需 要 修改 四 处 。 











play.csssecrets.io/vintage-envelope 


这 个 技 马 的 另 一 个 用 武之 地 是 生成 好 玩 的 蚂蚁 行 军 边框 ! 蚂蚁 行军 边框 
是 一 种 虚线 边框 ， 看 起 在 不 断 转 劲 ， 就 好 像 排 队 前 进 的 蚂 玉 一 样 〈 如 采 你 把 
虚线 上 的 线段 想像 成 一 只 只 蚂蚁 的 话 )。 这 个 技巧 在 图 形 界面 中 的 大 量 应 用 
可 能 完全 出 乎 你 的 意料 一 一 几乎 所 有 的 图 像 编 辑 软 件 都 会 使 用 这 个 效果 来 标 
不 选区 (参见 图 2-62 )。 


为 了 创建 蚂蚁 行 军 效果 ， 我 们 将 会 用 到 “老式 信封 ”技巧 的 一 个 变种 。 
我 们 将 把 条 纹 转变 为 黑 日 两 色 ， 并 把 边框 的 宽度 减少 至 1px【〈 注 意 到 斜 回 条 
纹 是 怎么 转变 成 虚线 边框 的 吗 )， 然 后 再 把 background-size 改 为 某 个 合适 
的 值 。 最 后 ， 我 们 把 background-position 以 动画 的 方式 改变 为 .86%， 就 
可 以 让 它 深 动 起 来 了 : 








@keyframes ants { to { background-position: 166% } } 


.marching-ants { 
padding: 1lem; 
border: 1px solid transparent; 
background: 
linear-gradient(white, white) padding-box， 
repeating-linear-gradient(-45deg, 
black 6, black 25%, white 6@, white 56% 
) 6 / .6em .6em; 
animation: ants 12s linear infinite; 


} 


你 可 以 在 图 2-63 中 看 到 它 的 静止 状态 。 显 然 ， 这 个 技巧 不 仅 在 实现 
蚂蚁 行车 时 很 有 用 ， 还 可 以 创建 出 各 种 特殊 样式 的 虚线 框 : 不 管 是 为 虚 
线 线段 指定 不 同 的 颜色 ， 还 是 自 定义 线段 的 长 度 和 间 隐 的 长 度 ， 全 都 不 
在 话 下 。 





2-60 
现实 世界 里 的 老式 信 雪 


想 要 杀手 验证 这 些 问 题 ， 
请 访 问 play.csssecrets.io/ 
vintage-envelope-border- 
image。 不妨 改 一 改 其 中 的 值 来 体 
验 一 下 。 


闲居 


My border is reminiscent of 
外 vintage envelopes, how 
cool is that? 


HUULUA 


2-61 
我 们 的 “老式 信封 ”边框 样式 






管 Photoshop File EE 


局 SR 


2-62 
Adobe Photoshop 也 使 用 “ 曲 蚁 
行军 ”技巧 来 标示 选区 





en ee en em ee em em em em em 


2-63 
我 们 不 太 可 能 在 书 里 展示 出 “ 昭 
蚁 行军 ”的 动画 效果 ( 在 静止 状 
态 下 它 看 起 来 只 是 个 虚线 框 ) ; 
请 访问 动态 的 演示 页 面 吧 ， 它 真 
的 很 好 玩 


2-64 
项 部 边框 的 裁 切 效果 ， 用 来 模拟 
传统 的 脚注 








当前 ， 如 果 要 通过 border-image 来 实现 类 似 的 效果 ， 唯 一 的 办 法 
是 为 border-image-source 指定 一 个 GIF 动画 ， 束 像 chrisdanford.com/ 
blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css 所 展示 
的 那样 。 当 浏览 郝 开 始 文 持 新 变 插值 的 时 候 ， 我 们 还 可 以 用 渐变 来 实现 它 ， 
只 不 过 有 点 烦琐 、 不 够 DRY。 





play.csssecrets.io/marching-ants 


当然 ，border-image 也 有 它 强 大 的 地 方 ， 尤 其 是 在 搭配 渐变 图 案 时 更 
是 威力 倍增 。 举 个 例子 ， 假 设 我 们 需要 一 个 项 部 边框 被 裁 切 的 效果 ， 就 像 
一 般 的 脚注 那样 。 我 们 所 需要 的 就 是 border-image 属性 再 加 上 一 条 由 浙 
变 生 成 的 垂直 条 纹 ， 并 把 要 裁 切 的 长 度 在 渐变 中 写 好 。 边 框 线 的 粗细 交 给 
border-width 来 控制 。 代 码 看 起 来 是 这 样 的 : 


border-top: .2em solid transparent; 
border-image: 166% 6 6 linear-gradient(98deg, 
currentColor 4em， 
transparent 6) 
padding-top: 1lem; 


效果 如 图 2-64 所 示 。 不 仅 如 此 ， 由 于 我 们 把 所 有 属性 都 指定 为 em 单 
位 ， 效 果 会 根据 font-size 的 变化 而 自动 调整 。 男 外 ， 由 于 我 们 使 用 了 
currentColor， 它 也 会 根据 color 属性 的 变化 而 自动 适应 (假设 我 们 希望 
这 条 边框 跟 文字 保持 相同 的 颜色 )。 








| This js a footnote. 


ts 


四 CSS 背景 与 边框 
http://w3.o0org/TR/css-backgrounds 


四 CSS 图 像 
http://w3.o0org/TR/css-images 


相关 规范 











图 3-1 

给 元 素 设 置 固定 宽 高 以 及 一 半 长 
度 的 border-radius， 可 以 得 到 
一 个 圆 形 
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在 前 面 的 圆 形 示例 中 ， 当 高 度 小 
于 宽度 时 发 生 的 情况 ， border- 
radius 所 产生 的 圆 形 用 虚线 标示 


目 适 应 的 椭圆 


border-radius 属性 的 基本 用 法 





难 十 


你 可 能 注意 到 过 ， 给 任何 正方 形 元 对 设置 一 个 足够 大 的 border- 
radius， 束 可 以 把 它 变 成 一 个 圆 形 。 所 用 到 的 CSS 代码 如 下 所 示 : 





background: #fb3; 

width: 266px; 

height: 266pX ; 

border-radius: 166px; /* >= 正方 形 边 长 的 一 半 */ 


你 可 能 还 注意 到 了 ， 如 条 指定 任何 大 于 168px 的 半径 ， 仍 然 可 以 得 到 一 
个 圆 形 。 规 范 特 别 指出 了 这 其 中 的 原因 : 


“ 当 任 意 两 个 相 领 圆 角 的 半径 之 和 超过 border box 的 尺寸 时 ， 用 户 
代理 必须 按 比 例 减 小 各 个 边框 半径 所 使 用 的 值 ， 直 到 它们 不 会 相互 重 爱 
pd 


一 一 CSS 缘 景 与 边框 (第 三 版 〉(http://w3.org/TR/css3- 


background/#corner-overlap ) 


不 过 ， 我 们 往往 不 愿意 对 一 个 元 素 指 定 固 定 的 冤 度 和 高 度 ， 因 为 我 们 希 
望 它 能 根据 其 内 容 自动 调整 并 适应 ， 而 内 容 的 长 短 不 可 能 在 事先 就 知道 。 即 
使 是 在 设计 一 个 静态 网 站 的 时 候 〈 元 素 的 内 容 可 以 预先 确定 )， 我 们 也 可 能 
需要 在 某 个 时 刻 改 变 其 内 容 ; 或 者 我 们 为 它 准备 了 一 款 尺 十 略 有 差异 的 回 退 
字体 ， 而 不 同 字 体 对 相同 内 容 的 泻 染 结果 很 可 能 是 不 同 的 。 在 这 个 案例 中 ， 
我 们 通常 期 望 达到 这 个 效果 : 如 果 它 的 宽 高 相等 ， 就 显示 为 一 个 圆 如 果 宽 
高 不 等 ， 就 显示 为 一 个 椭圆 。 可 是 ， 我 们 前 面 的 代码 并 不 能 满足 这 个 期 望 。 
当 宽 度 大 于 高 度 时 ， 我 们 得 到 的 形状 如 图 3-2 所 示 。 那 我 们 到 底 能 不 能 
border-radius 来 产生 一 个 覃 圆 ， 甚 至 是 一 个 目 适 应 的 顶 圆 呢 ? 














解决 方案 


说 到 border-radius， 有 一 个 鲜 为 人 知 的 真相 : 它 可 以 单独 指定 水 平 ”Ji 要 
和 垂直 半径 ， 只 要 用 一 个 和 糙 杠 〈/) 分 隔 这 两 个 值 即 可 。 这 个 特性 允许 我 于 2 





们 在 拐角 处 创建 椭圆 圆 角 (参见 图 3-3)。 因 此 ， 如 果 我 们 有 一 个 尺寸 为 
200pxx150px 的 元 素 ， 就 可 以 把 它 圆 角 的 两 个 半径 值 分 别 指定 为 元 素 宽 高 的 
一 半 ， 从 而 得 到 一 个 精确 的 椭圆 : 








border-radius: 166px / 75px; 
一 个 容器 设置 了 不 相等 的 水 平和 
我 们 可 以 在 图 3-4 中 看 到 结果 。 垂直 border-radius;， 拐角 处 的 


但 是 ， 这 段 代码 存 在 一 个 很 大 的 缺陷 ， 只 要 元 素 的 尺寸 发 生变 化 ， 个 避 同色 水 向 是 训 中 公 浊 宇 
border-radius 的 值 就 得 跟着 改 。 我 们 在 图 3-5 中 可 以 看 到 ， 当 元 素 的 尺寸 ” 们 为 border-radius 指定 的 值 ， 
变 为 200pxx300px 时 ， 如 有 果 border-radius 没有 跟 痢 改变 ， 会 发 生 什 么 后 ”在 图 中 用 虚线 标示 

果 。 因 此 ， 如 果 我 们 的 元 素 尺 寸 会 随 着 它 的 内 容 变 化 而 变化 ， 这 就 是 一 个 问 

题 了 。 


难道 我 们 真 的 走投无路 了 吗 ? 其 实 ，border-radius 这 个 属性 还 有 为 外 
一 个 鲜 为 人 知 的 真相 ， 它 不 仅 可 以 接受 长 度 值 ， 还 可 以 接受 百分比 值 。 这 个 
百分比 值 会 基于 元 素 的 尺寸 进行 解析 ， 即 宽度 用 于 水 平 半 径 的 解析 ， 而 高 度 
用 于 垂直 半径 的 解析 。 这 意味 痢 相 同 的 百分比 可 能 会 计算 出 不 同 的 水 平和 垂 
直 半 径 。 因 此 ， 如 果 要 创建 一 个 自 适 应 的 彬 圆 ， 我 们 可 以 把 这 两 个 半径 值 都 
设置 为 56%: 














通过 非 对 称 的 border-radius 曲 


border-radius: 56% / 56%; 、 
线 来 创建 一 个 椭圆 


由 于 斜 杠 前 后 的 两 个 值 现在 是 一 致 的 《即使 它们 最 终 可 能 会 被 计算 为 不 
同 的 值 )， 我 们 可 以 把 这 行 代码 进一步 简化 为 ， 


border-radius: 56%; 
最 终 ， 只 需要 这 一 行 代码 ， 我 们 就 可 以 得 到 一 个 目 适 应 的 椭圆 了 。 


play.csssecrets.io/ellipse 


小 论 轰 为 什么 叫 border-radius? 


可 能 有 人 会 奇怪 ，border-radius 到 撒 由 何 得 名 。 这 个 属性 并 不 需要 边框 来 参与 工作 ， 似 乎 把 它 叫 作 
corner-radius 更 贴切 一 些 。 这 个 名 字 乍 听 起 来 确实 让 人 撞 不 着 头脑 ， 其 实 原因 在 于 border-radius 是 
对 元 素 的 border box 进行 切 圆 角 处 理 的 。 当 元 素 没 有 边框 时 ， 可 能 还 看 不 出 差异 ; 当 它 有 边框 时 ， 则 
以 边框 外 侧 的 拐角 作为 切 圆 角 的 基准 。 边 框 内 侧 的 圆 角 会 稍 小 一 些 ( 严格 来 说 内 角 半 径 将 是 max(@， 


border-radius-border-width) ) 


9 自 适 应 的 顶 圆 
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当 元 素 的 尺寸 发 生变 化 时 ， 我 们 
的 椭圆 形状 融 衣 坏 了 ; 不 过 话说 
回来 ， 用 这 个 形状 来 绘制 立体 效 
采 的 圆柱 体 倒 是 挺 不 赖 的 





图 3-6 
半 椭 加 


半 稀 加 


现在 我 们 已 经 知道 如 何 用 CSS 来 生成 一 个 自 适 应 的 椭圆 了 ， 接 下 来 很 
日 然 地 就 会 问 到 : 我 们 是 否 还 能 生成 其 他 常 见 的 形状 呢 ， 比 如 椭圆 的 一 部 
分 ? 让 我 们 先 来 思考 一 下 半 椭 圆 * 吧 (参见 图 3-6)。 


它 是 沿 纵 轴 对 称 ， 而 不 是 沿 模 轴 对 称 的 。 即 使 我 们 还 不 知道 border- 
radius 的 值 该 是 多 少 〈 或 者 是 不 是 真 的 存在 合适 的 什 )， 但 至 少 有 一 件 事 情 
是 很 清楚 的 : 我 们 需要 给 每 个 角 指 定 不 同 的 半径 。 但 是 ， 我 们 目前 为 止 所 答 
试 过 的 所 有 值 都 只 能 把 所 有 四 个 角 指定 为 同一 个 值 。 

邓 运 的 是 ，border-radius 的 语法 比 我 们 想像 中 灵活 得 多 。 你 可 能 会 惊 
讶 地 发 现 border-radius 原来 是 一 个 简写 属性 。 我 们 可 以 为 元 系 的 每 个 角 
指定 不 同 的 值 ， 而 且 还 有 两 种 方法 可 以 做 到 这 一 点 。 第 一 种 方法 就 是 使 用 它 
所 对 应 的 各 个 展开 式 属性 : 


加 border-top-left-radius 





























天 border-top-right-radius 
看 border-bottom-right-radius 


国 border-bottom-left-radius 


不 过 ， 真 正 简 洁 的 方法 还 是 使 用 border-radius 这 个 简写 属性 ， 因 为 
我 们 可 以 回 它 一 次 性 提供 用 空格 分 开 的 多 个 值 。 如 果 我 们 传 给 它 四 个 仁 ， 这 
四 个 值 就 会 被 分 别 从 左上 和 角 开 始 以 顺 时 针 顺 序 应 用 到 元 系 的 各 个 拐角 。 如 有 果 
我 们 提供 的 值 少 于 四 个 ， 则 它们 会 以 CSS 的 常规 方式 重复 ， 类 似 于 border- 
width 的 伍 。 如 采 只 提供 了 三 个 伍 ， 则 意味 看 第 四 个 值 与 第 二 仁 相 同 ， 如 采 
只 有 两 个 伸 ， 则 意味 着 第 三 个 值 与 第 一 个 相同 。 图 3-7 对 它 的 工作 原理 提供 
了 一 个 图 形 化 的 解释 。 我 们 甚至 可 以 为 所 有 四 个 角 提 供 完 全 不 同 的 水 平和 垂 
直 半 径 ， 方 法 是 在 和 斜 杠 前 指定 1~4 个 值 ， 在 斜 杠 后 指定 为 外 1~4 个 值 。 请 注 
意 这 两 组 值 是 单独 展开 为 四 个 值 的 。 举 例 来 说 ， 当 border-radius 的 值 为 
16px / 5px 26px 时 ， 其 效果 相当 于 16px 16px 16px 16px / 5px 26px 
Spx 20px。 

在 掌握 了 这 个 新 发 现 的 知识 之 后 ， 现 在 让 我 们 来 重新 审视 半 椭 加 的 问 
题 。 以 这 样 的 方式 来 指定 border-radius 上 的 可 以 生成 我 们 想 要 的 形状 
四? 试 了 才 和 知道。 让 我 们 先 来 观察 一 些 细节 。 

图 这 个 形状 是 垂直 对 称 的 ， 这 意味 着 左上 角 和 右上 角 的 半径 值 应 该 是 

相同 的 ， 与 此 类 似 ， 左 下 角 和 右 下 角 的 半径 值 也 应 该 是 相同 的 。 

加 顶部 边缘 并 没有 平 直 的 部 分 〈 也 就 是 说 ， 整 个 顶 边 都 是 曲线 )， 这 和 意 

味 大 左上 角 和 右上 角 的 半径 之 和 应 该 等 于 整个 形状 的 宽度 。 
































Q( 半 椭 圆 是 可 以 变 成 半圆 的 ， 只 要 它 的 宽度 刚好 伸展 到 高 度 的 两 倍 《〈 或 者 对 一 个 沿 纵 轴 辟 开 的 
椭圆 来 说 ， 是 高 度 伸展 为 宽度 的 两 倍 )。 





1 2 Ss 全 
border-radlius.: oe ; 
。 国 BS 
border-radius: 总 四 
e Ea 
border-radius: “ ,0 ; 
w border-radius: © °; 





基于 前 两 条 观察 ， 我 们 可 以 推 新 出 ， 左 半径 和 右 半 径 在 水 平方 回 上 
的 值 应 该 均 为 56%。 

再 看 看 垂直 方向 ， 似 乎 顶部 的 两 个 圆 角 占 据 了 整个 元 素 的 高 度 ， 而 
且 底 部 完全 没有 任何 圆 角 。 因 此 ， 在 竺 直方 加 上 border-radius 的 
合理 值 似乎 就 是 166% 166% 8 8。 

因为 底部 两 个 角 的 垂直 圆 角 是 去， 那么 它们 的 水 平 圆 角 是 多 少 就 完 
全 不 重要 了 ， 因 为 此 时 水 平 圆 角 总 是 会 被 计算 为 雪 。( 你 能 想像 一 个 
竺 直 半 径 为 零 而 水 平 半 径 为 正 值 的 圆 角 吗 ? 没 错 ， 连 写 规范 的 作者 
们 都 做 不 到 。) 














把 所 有 这 些 结论 绿 合 起 来 ， 我 们 就 可 以 很 容易 地 写 出 CSS 代码 ， 来 生 
成 图 3-6 中 那样 目 适 应 的 半 椭 圆 : 


border-radius: 56% / 166% 166% 0 8; 


接 下 来 举一反三 ， 用 CSS 代码 来 生成 一 个 沿 纵 轴 臂 开 的 半 椭 圆 ( 如 图 
3-8 所 示 ) 应 该 就 很 容易 了 





border-radius: 166% 86 86 166% / 56%; 


这 里 给 你 留 个 练习 : 试 试用 CSS 代码 写 出 椭圆 的 另外 一 半 吧 。 


play.csssecrets.io/half-ellipse 


四 分 之 一 顶 圆 


在 创建 了 一 个 完整 的 椭圆 和 半 椭 圆 之 后 ， 很 自然 的 下 一 个 问题 就 是 如 何 
生成 四 分 之 一 椭圆 (其 形状 如 图 3-9 所 示 )。 延 续 前 面 所 讲 的 思路 ， 我 们 注 








QD 与 半 椭 圆 的 情况 类 似 ， 当 这 个 形状 的 宽度 和 高 度 相等 时 ， 其 实 就 变 成 了 四 分 之 一 圆 ( 即 90° 


而 形 )。 
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为 border-radius 属性 分 别 指定 
4、3、2、1 个 由 空格 分 隔 的 值 
上 时， 这 些 值 是 以 这 样 的 规律 分 配 
到 四 个 角 上 的 ( 请 注意 ， 对 椭圆 
半径 来 说 ， 斜 枉 前 和 和 斜 杠 后 最 多 
可 以 各 有 四 个 参数 ， 这 两 组 值 是 
以 同样 的 方法 分 配 到 各 个 角 的 ) 
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一 个 沿 纵 轴 劈 开 的 半 椭 贺 
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四 分 之 一 椭圆 
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Simural 以 其 精湛 的 手法 将 
border-radius 发 挥 到 了 极致 ， 
其 糖果 按钮 (http://simurai.com/ 
archive/buttons ) 展示 了 各 种 奇妙 
的 形状 


意 到 ， 要 创建 一 个 四 分 之 一 覃 圆 ， 其 中 一 个 角 的 水 平和 垂直 半径 值 都 需要 是 
100%， 而 其 他 三 个 角 都 不 能 设 为 圆 角 。 由 于 这 四 个 角 的 半径 在 水 平和 垂 特 
方向 上 都 是 相同 的 ， 我 们 甚至 都 不 需要 使 用 和 斜 杠 语法 了。 最 终 代码 应 该 是 这 
样 的 : 


border-radius: 166% 8 86 0; 


你 不 免 还 会 顺 着 往 下 想 ， 是 不 是 还 能 用 border-radius 来 生成 椭圆 的 
其 他 切 块 《比如 和 八 分 之 一 椭圆 、 三 分 之 一 椭圆 〉)? 很 和 遗憾， 你 可 能 会 失望 
了 ， 因 为 border-radius 属性 是 无 法 生成 这 些 形状 的 。 


BonBon 


Sweet CSS3 Buttons 





eg © \B Sb 





re 





四 CSS 背景 与 边框 相关 规范 


http://w3.org/ 工 R/css-backgrounds 





基本 的 CSS 变形 


难 匮 





平行 四 边 形 其 实 是 矩形 的 超 集 : 它 的 各 条 边 是 两 两 平行 的 ， 但 各 个 角 则 
不 一 定 都 是 直角 (参见 图 3-11)。 在 视 党 设计 中 ， 平 行 四 边 形 往往 可 以 传达 
出 一 种 动感 (参见 图 3-12 )。 

让 我 们 试 着 用 CSS 创建 一 个 按钮 状 的 平行 四 边 形 链接 。 我 们 的 起 点 就 
是 一 个 普通 的 块 状 按钮 ， 辅 以 一 些 徐 单 的 样式 ， 如 图 3-13 所 示 。 然 后 ， 我 
们 可 以 通过 skew() 的 变形 属性 来 对 这 个 矩形 进行 斜 问 拉 伸 : 





transform: skewX(-45deg); 
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图 3-11 
平行 四 边 形 


图 3-12 
网 页 设计 中 的 平行 四 边 形 (由 
Martina Pitakova 设计 ) 





CLICK ME 
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我 们 的 按钮 ， 在 应 用 任何 变形 样 
式 之 前 


10 ”平行 四 边 形 





图 3-14 
按钮 进行 斜 向 变形 之 后 ， 它 的 文 
字 就 很 难 读 了 


外 如 果 你 想 把 这 个 效果 应 用 到 
一 个 默认 显示 为 行内 的 元 素 ， 不 

忘记 把 它 的 display 属性 设置 
为 其 他 值 ， 比 如 inline-block 
或 block， 否 则 变形 是 不 会 生效 
的 。 这 一 点 对 它 内 层 的 元 素 也 是 
适用 的 。 
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最 终 效果 





图 3-16 

伪 元 素 目 前 在 内 容 之 上 ， 因 此 对 
伪 元 素 应 用 background: #58a 
会 把 内 容 完 全 盖 住 


第 3 章 形状 


但 是 ， 这 了 叶 任 它 的 内 容 也 发 生 了 冬 问 变形 ， 这 很 不 好 看 ， 而 且 难 谈 〈 参 
见 图 3-14)。 有 没有 办 法 只 让 容器 的 形状 倾斜 ， 而 保持 其 内 容 不 变 呢 ? 


骨 套 元 素 方案 


我 们 可 以 对 内 容 再 应 用 一 次 反 向 的 skew() 变形 ， 从 而 抵消 容器 的 变形 
效果 ， 最 终 产 生 我 们 所 期 望 的 结果 。 不 幸 的 是 ， 这 意味 着 我 们 将 不 得 不 使 用 
一 层 额 外 的 HTML 元 素来 包 右 内 容 ， 比 如 用 一 个 div: 








<a href="#yolo" class="button"> 
<div>Click me</div> 
</a> 


.button { transform: skewX(-45deg); } 
.button > div { transform: skewX(45deg); } 





我 们 在 图 3-15 中 可 以 看 到 ， 这 个 方法 的 表现 很 不 错 ， 但 它 也 意味 着 我 
们 不 得 不 添加 额外 的 HTML 元 素 。 如 果 结 构 层 的 变更 是 不 允许 的 ， 或 者 你 
希望 严格 保持 结构 层 的 纯净 度 ， 别 担心 ， 我 们 还 有 一 个 纯 CSS 的 解决 方案 。 











ye ea 


伪 元 素 方案 
另 一 种 思路 是 把 所 有 样式 〈 背 景 、 边 框 等 ) 应 用 到 伪 元 素 上 ， 然 后 再 对 


伪 元 素 进行 变形 。 因 为 我 们 的 内 容 并 不 是 包 仿 在 伪 元 素 里 的 ， 所 以 内 容 并 不 
会 受到 变形 的 影响 。 下 面 来 看 看 这 个 技巧 能 否 得 到 与 前 面相 同 的 链接 伴 式 。 


我 们 希望 伪 元 又 保持 良好 的 灵活 性 ， 可 以 目 动 继承 其 箱 主 元 又 的 尺寸 ， 
其 至 当 答 主 元 素 的 尺寸 是 由 其 内 容 来 决定 时 仍然 如 此 。 一 个 人 简单 的 办 法 是 
给 宿主 元 素 应 用 position: relative 样式 ， 并 为 伪 元 素 设置 position: 
absolute， 然 后 再 把 所 有 偶 移 量 设 置 为 零 ， 以 便 让 它 在 水 平和 垂直 方 各 上 都 
被 拉 伸 至 答 主 元 素 的 尺寸 。 代 人 码 看 起 来 是 这 样 的 : 









































.button { 
position: relative; 
/* 其 他 的 文字 颜色 、 内 边 距 等 样式 …… */ 


1 
.button: :before { 

content: ''; 

position: absolute; 

top: 6; right: 6; bottom: 6; left: ©; 
} 








此 时 ， 用 伪 元 系 生 成 的 方块 是 重合 在 内 容 之 上 的 ， 一旦 给 它 设置 背景 ， 
就 会 亡 住 内 容 ( 参 见 图 3-16)。 为 了 修复 这 个 问题 ， 我 们 可 以 给 伪 元 素 设 置 














z-index: -1 样式， 这 样 它 的 堆 释 层次 就 会 被 推 到 和 宿主 元 素 之 后 。 

现在 我 们 要 做 的 最 后 一 步 ， 就 是 尽情 地 对 它 设置 变形 样式 ， 并 享受 美好 
的 结果 。 最 终 版 的 代码 如 下 所 示 ， 它 产生 的 视觉 效果 跟前 文 所 述 技 巧 是 完全 
一 致 的 : 





.button { 
position: relative; 
/* 其 他 的 文字 颜色 、 内 边 距 等 样式 …… */ 


.button: :before { 
content: ''; /* 用 伪 元 素来 生成 一 个 矩形 */ 
position: absolute; 
top: 6; right: 6; bottom: 6; left: 6; 
z-index: -1; 
background: #58a; 
transform: skew(45deg); 


| 


这 个 技巧 不 仅 对 skew( ) 变形 来 说 很 有 用 ， 还 适用 于 其 他 任何 变形 样式 ， 
当 我 们 想 变 形 一 个 元 素 而 不 想 变 形 它 的 内 容 时 就 可 以 用 到 它 。 举 个 例子 ， 我 
们 把 这 个 技巧 针对 rotate() 变形 样式 稍稍 调整 一 下 ， 再 用 到 一 个 正方 形 元 
系 上 上， 网 可 以 很 容易 地 得 到 一 个 委 形 。 


这 个 技巧 的 关键 在 于 ， 我 们 利用 伪 元 素 以 及 定位 属性 产生 了 一 个 方块 ， 
然后 对 伪 元 际 设 置 样式 ， 并 将 其 放置 在 其 条 主 元 素 的 下 层 。 这 种 思路 同样 可 
以 运用 在 其 他 场景 中 ， 从 而 得 到 各 种 各 样 的 效果 。 

国 如 果 要 在 IE8 下 实现 多 重 背 景 ， 这 个 方法 往往 是 不 错 的 变通 解决 方 

案 。 这 个 创意 最 初 是 由 Nicolas Gallagher (http://nicolasgallagher. 
com/multiple-backgrounds-and-borders-with-css2) 发 现 的 。 

恒 这 个 方法 可 以 用 来 实现 “边框 内 圆 角 ”中 的 效果 。 你 能 猜 到 怎么 做 
加? 

罩 这 个 方法 可 以 用 来 为 某 一 层 “ 背 景 ” 单 独 设置 类 似 opacity 这 样 的 
属性 。 这 个 技巧 也 是 由 Nicolas Gallagher (http://nicolasgallagher. 
com/css-background-image-hacks) 首创 的 。 

田 ” 当 我 们 不 能 使 用 “多 重 边框 ”中 的 技巧 时 ， 这 个 方法 还 可 以 用 一 种 
更 加 灵活 的 方式 来 模拟 多 层 边 框 。 比 如 ， 当 我 们 需要 多 层 的 虚线 边 
框 ， 或 者 需要 在 多 重 边 框 之 间 留 有 透明 空 际 时 。 


play.csssecrets.io/parallelograms-pseudo 

















| 相关 规范 
http://w3.org/TR/css-transforms 
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Css 灾 形 硬 人 四 地 形 ， 





难 匮 


在 视觉 设计 中 ， 把 图 片 裁 切 为 稳 形 是 一 种 第 见 的 设计 手法 ， 但 在 CSS 
中 还 没有 一 种 简单 直观 的 方法 来 实现 它 。 事 实 上 ， 和 直到 最 近 ， 这 种 效 琳 才 基 
本 成 为 可 能 。 当 网 页 设计 师 想 要 实现 这 种 设计 风格 时 ， 他 们 通常 不 布 望 在 图 
像 处 理 软件 中 预先 把 图 乒 裁 好 。 显 然 不 用 说 你 也 知道 ， 这 个 方法 的 可 维护 性 
并 不 好 。 如 果 未 来 有 人 想 修 改 图 刻 风 格 ， 将 很 难 增加 其 他 效果 ， 而 且 最 终 往 
往 会 搞 得 一 团 精 。 


想必 现在 有 更 好 的 办 法 了 吧 ? 没 错 ， 而 且 有 两 种 办 法 ! 


24 WAYS 














图 3-17 

自从 2013 年 改版 以 来 ，24ways. 
org 一 直 把 作者 的 头像 显示 为 一 
个 萎 形 。 它 所 使 用 的 正 是 这 里 要 
讨论 的 技巧 
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CSS3 Patterns, Explained 


Lea Verou 





16 December 2011 Many of you have probably seen my CSS3 patterns gallery. It 

became very popular throughout the year and it showed 

many web developers how powerful CSS3 gradients really 

14 comments are. But how many really understand how these patterns 
are created? The biggest benefit of CSS-generated 
backgrounds is that they can be modified directly within the 
style sheet. This benefit is void if we are just copying and 
pasting CSS code we don'tunderstand. We may as well use 
a data URI instead. 


Published in Code 


基于 变形 的 方案 
主要 的 思路 与 前 一 篇 攻略 “平行 四 边 形 ” 中 讨论 的 第 一 个 解决 方案 一 


致 : 需要 把 图 片 用 一 个 <div> 包 于 起 来 ， 然 后 对 其 应 用 相反 的 rotate() 
变形 样式 : 
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<div class="picture"> 
<img src="adam-catlace.jpg" alt="..." /> 
</div> 


.Picture { 
width: 4606px; 
transform: rotate(45deg); 
overflow: hidden; 


) 
.picture > img { 
max-width: 166%; 
transform: Potate(-45deg ) ; 
j 


但 是 ， 我 们 在 图 3-19 中 可 以 看 到 ， 它 并 没有 一 步 到 位 地 和 直接 达到 我 们 
期 望 的 效 订 ， 除 非 我 们 期 望 的 效果 是 把 它 裁 成 一 个 八角 形 一 一 如 果 是 那样 的 
话 ， 我 们 就 可 以 到 此 为 止 然 后 去 人 研究 号 儿 别 的 什么 。 如 来 要 把 图 片 裁 成 一 个 
萎 形 ， 和 起 怕 还 得 再 费 一 番 周 折 。 


主要 问题 在 于 max-width: 166% 这 条 声明 。16866% 会 被 解析 为 容 善 
(.picture) 的 边 长 。 但 是 ， 我 们 想 让 图 片 的 宽度 与 容器 的 对 角 线 相等 ， 而 
不 是 与 边 长 相等 。 你 可 能 已 经 猪 到 了 ， 没 错 ， 我 们 又 要 用 到 勾 股 定理 了 (如 
果 你 需要 复习 一 下 ， 请 翻 回 “和 斜 向 条 纹 ” 一 节 )。 这 个 定理 告诉 我 们 ， 一 个 
正方 形 的 对 角 线 长 度 等 于 它 的 边 长 乘 以 V2 x1.414 213 562 。 因 此 ， 把 max- 
width 的 值 设 置 为 V2 x100% = 414.421 356 2% 是 很 合理 的 ， 或 者 把 这 个 值 
向 上 取 整 为 142%， 因 为 我 们 不 希望 因为 计算 的 售 人 问题 导致 图 片 在 实际 显 
示 时 稍 小 (但 稍 大 是 没 问题 的 ， 反 正 我 们 都 是 在 裁 切 图 片 嘛 )。 


如 果 用 scale() 变形 样式 来 把 这 个 图 片 放 大 ， 实 际 上 会 更 加 合理 ， 原 
因 如 下 。 

年 ”我们 希望 图 片 的 尺寸 属性 保留 166% 这 个 值 ， 这 样 当 浏览 器 不 支持 变 
形 样 式 时 仍然 可 以 得 到 一 个 合理 的 布局 。 

国 通过 scale() 变形 样式 来 缩放 图 片 时 ， 是 以 它 的 中 心 点 进行 缩放 的 
(除非 我 们 额外 指定 了 transform-origin 样式 )。 通 过 width 属性 
来 放大 图 片 时 ， 只 会 以 它 的 左上 角 为 原点 进行 缩放 ， 从 而 迫使 我 们 
动用 额外 的 负 外 边 距 来 把 图 片 的 位 置 调 整 回来 。 


把 以 上 这 些 分 析 结 果 整 合 起 来 ， 束 可 以 得 到 以 下 代码 : 




















.Picture { 
width: 4606px; 
transform: rotate(45deg); 
overflow: hidden; 
) 
.picture > img { 
max-width: 166%; 
transform: rotate(-45deg) scale(1.42) ; 





图 3-18 
原版 图 片 ; 我们 将 把 它 裁 切 进 一 


个 效 形 中 





图 3-19 

相反 的 rotate() 变形 样式 并 不 
足以 达到 期 望 的 效果 ( .picture 
div 用 一 个 虚线 框 标 示 ) 





3-20 
最 终 裁 切 后 的 图 片 效果 


可 以 在 图 3-20 中 看 到 ， 这 段 代码 确实 可 以 产生 我 们 期 望 的 结果 。 
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不 完全 支持 





图 3-21 
如 果 图 片 不 是 正方 形 ， 基 于 变形 
的 方案 就 会 严重 地 前 坏 





3-22 
clip-path 方法 可 以 很 好 地 适应 
非 正 方形 的 图 片 


裁 切 路 径 方案 


上 面 的 方法 确实 可 以 奏效 ， 但 它 基本 上 是 一 个 hack。 这 个 方法 需要 一 层 
额外 的 HTML 标签 ， 这 不 人 够 答 滞 ;代码 本 刁 也 不 够 直观 ; 它 甚 至 还 不 够 健 
壮 一 一 如 果 我 们 碰巧 要 处 理 一 张 非 正 方形 的 图 片 ， 这 个 小 把 戏 就 会 原形 毕露 
(参见 图 3-21 )。 


事实 上 ， 我 们 还 有 一 个 更 好 的 办 法 来 完成 这 个 任务 。 它 的 主要 思路 是 
使 用 clip-path 属性 。 这 个 特性 也 是 从 SVG 那里 借鉴 而 来 ， 已 经 可 以 应 用 
在 HTML 元 素 上 了 “至少 对 于 文 持 的 浏览 右 来 说 是 这 样 的 )。 而 且 它 的 语法 
也 很 友好 、 可 该 性 不 销 ， 完 全 不 像 SVG 里 的 原版 语法 那样 会 把 人 通 疾 。 它 
最 大 的 缺陷 在 于 〈 在 写作 本 书 时 ) 其 浏览 右 文 持 程 度 还 很 有 限 。 但 是 ， 它 
可 以 平稳 退化 (只 是 没有 裁 切 效果 而 已 )， 因 此 它 至 少 有 资格 成 为 我 们 的 备 
i 

你 可 能 比较 熟悉 图 像 人 处 理 软 件 (比如 Adobe Photoshop) 中 的 裁 切 路 径 
功能 。 裁 切 路 径 人 允许 我 们 把 元 素 裁 剪 为 我 们 想 要 的 任何 形状 。 在 这 个 例子 
中 ， 我 们 将 会 使 用 polygon()( 多 边 形 〉 也 数 来 指定 一 个 魏 形 。 实 际 上 ， 它 
允许 我 们 用 一 系列 (以 逗号 分 隐 的 ) 坐标 点 来 指定 任意 的 多 边 形 。 我 们 甚至 
可 以 使 用 百分比 值 ， 它 们 会 解析 为 元 陛 目 身 的 太 寸 。 代 但 如 下 所 示 : 




















clip-path: polygon(56% 8，166% 56%，56% 166%, © 56%) ; 








信 不 信和 由 你 ， 它 就 是 这 人 么 简单 ! 它 产 生 的 效果 跟 图 3-20 是 完全 一 样 的 ， 
但 完全 不 需要 多 一 层 HTML 标签 和 八 行 难以 破译 的 CSS 代码 ， 只 需要 清 清 
丈 率 的 一 行 代 码 就 可 以 搞定 。 


clip-path 所 能 创造 的 奇迹 还 不 止 于 此 。 这 个 属性 甚至 可 以 参与 动画 ， 
只 要 我 们 的 动画 是 在 同一 种 形状 孔 数 (比如 这 里 是 polygon()) 之 间 进 行 
的 ， 而 且 点 的 数量 是 相同 的 。 因 此 ， 如 果 我 们 和 希望 图 片 在 鼠标 悬 停 时 平滑 地 
扩展 为 完整 的 面积 ， 只 需要 这 样 做 : 








img { 
clip-path: polygon(56% 8，1662% 56%， 
56% 1006%, 0 56% ) ; 
transition: 1s clip-path; 


| 


img:hover { 
clip-path: polygon(86 8，166% 9， 
106% 1066%,， 0 166% ) ; 


此 外 ， 这 个 方法 还 可 以 很 好 地 适应 非 正方 形 的 图 片 ， 如 图 3-22 所 示 。 
呵 ， 现 代 的 CSS 真是 乐趣 无 穷 啊 …… 


play.csssecrets.io/diamond-clip 


CSS 变形 
http://w3.org/TR/css-transforms 相 关 规 > 己 


CSS 遮 单 


http://w3.0org/TR/css-masking 


CSS 过 渡 
http://w3.0org/TR/css-transitions 








切 角 效 果 


CSS 渐变 ，background-size, “条纹 背景 ” 





难题 


把 角 切 掉 不 仅 是 为 了 省 钱 ， 它 还 是 一 种 非 笛 流行 的 设计 风格 ， 不 论 是 在 
印刷 媒介 还 是 在 网 页 设计 中 都 是 如 此 。 它 最 常见 的 形态 是 把 元 素 的 一 个 或 多 
个 角 切 成 45 的 缺口 〈 也 称 作 斜面 切 角 )。 尤 其 是 在 最 近 ， 当 局 平 化 设计 的 风 
头 完 全 荔 过 拟 物 化 之 后 ， 这 种 效果 就 愈 发 流行 了 。 当 切 角 效 灯 只 应 用 在 元 系 
的 菏 一 侧 ， 且 切 角 的 矿 才 刚好 达到 元 素 高 度 的 50% 时 ， 就 会 得 到 一 个 季 头 。” 图 3-23 


形状 ， 这 在 按钮 和 面包 居 导 航 中 的 应 用 非常 普遍 〈 人 参见 图 3-23 )。 一 个 使 用 了 切 角 效果 的 按钮 ， 
4 本 箭头 形状 很 好 地 强调 了 它 自身 
但 是 ， 目 前 的 CSS 仍然 无 法 做 到 只 用 一 行 简 单 直观 的 代码 就 生成 这 样 ”的 含义 


的 效果 。 这 导致 绝 大 多 数 网 页 开发 者 倾 钻 于 使 用 背景 图 片 来 达到 目的 ， 比 如 











12 切 角 效果 


图 3-24 
以 这 个 网 站 为 例 ， 它 就 在 设计 


中 运用 到 了 切 角 效 果 ( “Find & 
Book” 半 透明 区 块 的 左下 角 ) 


Hey focus! You re supposed to 


be looking at my corners, not 
reading my text. The text is 


Just placeholder! 


3-25 
元 素 右 下 角 的 切 角 效 果 是 由 简单 
的 CSS 渐变 实现 的 


我 们 为 两 层 渐变 使 用 了 不 同 
的 颜色 〈 国 #58a 和 国 #655) 以 
便 更 好 地 调试 。 在 实际 开发 中 ， 
它们 的 颜色 应 该 是 相同 的 。 














使 用 三 角形 兰 住 元 系 的 顶 角 来 模拟 切 角 效 末 〈 当 网 页 背景 是 纯色 时 )， 或 者 
使 用 一 张 或 多 张 已 经 切 过 角 的 图 上 来 作为 整个 元 素 的 育 景 。 
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这 些 方 宁 显然 都 不 够 灵活 、 难 以 维护 ， 而 且 增 加 了 网 页 的 加 载 时 间 : 不 
仅 增 加 了 额外 的 HTTP 请求 ， 而 且 网 页 所 需 的 文件 体积 也 增加 了 。 我 们 还 有 
更 好 的 方法 吗 ”? 


解决 方案 


第 一 种 方案 来 自 于 无 所 不 能 的 CSS 渐变 。 假 设 我 们 只 需要 一 个 角 被 切 
掉 的 效果 ， 以 右 下 角 为 例 。 这 其 中 最 大 的 罕 门 在 于 充分 利用 渐变 的 一 大 特 
性 ， 渐变 可 以 接受 一 个 角度 (比如 45deg) 作为 方向 ， 而 且 色 标的 位 置信 息 
也 可 以 是 绝对 的 长 度 值 ， 这 一 点 丝毫 不 受 容 器 尺寸 的 影响 。 

综合 以 上 这 些 想法 ， 我 们 只 需要 一 个 线性 渐变 就 可 以 达到 目标 。 这 个 渐 
变 需要 把 一 个 透明 色 标 放 在 切 角 处 ， 然 后 在 相同 位 置 设置 另 一 个 色 标 ， 并 且 
把 它 的 颜色 设置 为 我 们 想 要 的 背景 色 。CSS 代码 如 下 所 示 (假设 切 角 的 深度 
是 15pxX ) : 





























background: #58a; 
background: 
linear-gradient(-45deg, transparent 15px, #58a 0); 


很 简单 ， 对 吧 ? 你 可 以 在 图 3-25 中 看 到 结果 。 事 实 上 ， 第 一 行 声 明 
并 不 是 必需 的 ， 加 上 它 是 将 其 作为 回 退 机 制 : 如 果菜 些 浏览 器 不 支持 CSS 
渐变 ， 那 第 二 行 声 明 会 被 丢弃 ， 而 此 时 我 们 至 少 还 能 得 到 一 个 简单 的 实 色 


刁 已 己 . 
月 和 所。 


现在 ， 假 设 我 们 想 要 两 个 角 被 切 掉 的 效果 ， 以 底部 的 两 个 角 为 例 。 我 们 
只 用 一 层 渐变 是 无 法 做 到 这 一 点 的 ， 因 此 要 再 加 一 层 。 我 们 最 初 的 想法 可 能 
是 这 样 的 : 











background: #58a; 
background: 


linear-gradient(-45deg, transparent 15px, #58a 0), 
linear-gradient(45deg, transparent 15px, #655 0); 


可 是 ， 我 们 在 图 3-26 中 可 以 发 现 ， 这 样 写 是 行 不 通 的 。 默 认 情 况 下 ， 
这 两 层 渐 变 都 会 填 满 整 个 元 素 ， 因 此 它们 会 相互 覆盖 。 需 要 让 它们 都 缩小 一 
些 ， 于 是 我 们 使 用 background-size 让 每 层 渐 变 分 别 只 占据 整个 元 素 一 半 
的 面积 。 





background: #58a ; 


background : 
linear-gradient(-45deg, transparent 15px, #58a 0) 
right, 
linear-gradient(45deg, transparent 15px, #655 0) 
left; 


background-size: 56% 166% ; 





我 们 可 以 在 图 3-27 中 看 到 结果 。 如 你 所 见 ， 尽管 我 们 已 经 用 了 
background-size， 但 这 两 层 渐变 仍然 是 相互 覆盖 的 。 原 因 在 于 ， 我 们 忘记 
把 background-repeat 关 挥 了， 因而 每 层 渐变 图 案 各 自 平 铺 了 两 次 。 这 了 导 
致 我 们 的 两 层 渐 变 背 景 仍 然 是 相互 黎 盖 的， 只 不 过 这 次 是 因为 背景 平 铺 。 改 
进 后 的 代码 是 这 样 的 : 





background: #58a ; 


background : 
linear-gradient(-45deg, transparent 15px, #58a 0) 
right, 
linear-gradient(45deg, transparent 15px, #655 0) 
left; 


background-size: 56% 166%; 
background-repeat: no-repeat ; 


你 可 以 在 图 3-28 中 看 最 终 效 灯 一 一 我 们 终于 成 功 了 ! 看 到 这 里 ， 你 应 
该 已 经 猜 到 怎样 把 四 个 角 都 做 出 切 角 效 果 了 。 你 需要 四 层 渐 变 图 和 案 ， 代 码 如 
个 加 不 





background: #58a; 


background: 
linear-gradient(135deg, transparent 1i5px, #58a 0) 
top left, 
linear-gradient(-135deg, transparent 1i5px, #58a 6) 
top right, 


linear-gradient(-45deg, transparent 15px, #58a 0) 
bottom right, 
linear-gradient(45deg, transparent 15px, #58a ©) 
bottom left; 
background-size: 56% 56% ; 
background-repeat: no-repeat; 


你 可 以 在 图 3-29 中 看 到 结果 。 上 面 这 段 代 码 有 一 个 问题 ， 它 的 可 维护 
性 并 不 理想 。 我 们 在 改变 背景 色 时 需要 修改 五 处 ， 而 在 改变 切 角 尺寸 时 需要 
修改 四 处 。 使 用 预 处 理 带 的 mixin 可 以 帮助 我 们 减少 代码 的 重复 度 。 如 果 用 


Hey, focus! You re supposed to 


be looking at my corners, not 
readine my text. 1 he text 1s 


Just placeholder! 





3-26 
尝试 给 底部 的 两 个 角 设 置 切 角 样 
式 ， 但 失败 了 


Hey focus! You re supposed to 
be looking at my corners, not 
reading my text. The text i1s 


re te (elay 





图 3-27 
只 用 background-size 还 是 不 够 


的 


elocusinou re supposed to 
Belookme ramy corners, not 
readimno my text. | he text 1s 


Just placeholder! 





图 3-28 
左下 角 和 右 下 角 的 切 角 效果 终于 
实现 了 


Hey, focus! You re supposed to 
be lookmneoc at my corners Dot 
SD / 


reading my text. The text is 


just Placeholder! 





图 3-29 
通过 四 层 渐变 图 案 ， 就 可 以 给 四 
个 角 都 加 上 切 角 效 果 


12 切 角 效果 


SCSS 来 写 ， 代 人 码 会 是 这 样 的 : 


omixin beveled-corners($bg, 
$t1l:0, $tr:$tl, $br:$tl, $bl:$tr) { 
background: $bg; 
background: 
linear-gradient(135deg, transparent $tl, $bg 6) 
top left, 
linear-gradient(225deg, transparent $tr, $bg 6) 
top right, 
linear-gradient(-45deg, transparent $br, $bg 6) 
bottom right, 
linear-gradient(45deg, transparent $bl, $bg 6) 
bottom left; 
background-size: 56% 56%; 
background-repeat: no-repeat; 





然后 ， 在 需要 的 时 候 ， 我 们 就 可 以 直接 调用 它 ， 并 传人 2~5 个 参数 : 


Qinclude beveled-corners(#58a, 15px, 5px); 


在 上 面 这 行 代码 中 ， 元 系 的 左上 角 和 右 下 角 会 得 到 15px 的 切 角 效果 ， 
而 右上 和 角 和 左下 角 会 得 到 5px 的 切 角 效果 。 如 果 我 们 提供 的 值 少 于 四 个 ， 它 
的 行为 跟 border-radius 属性 是 类 似 的 。 这 归功 于 我 们 在 SCSS 的 mixin 中 
为 各 个 参数 指定 了 默认 值 ， 而 且 这 些 默认 值 也 可 以 引用 其 他 参数 的 值 。 


弧 形 切 角 


上 述 渐 变 技巧 还 有 一 个 变种 ， 可 以 用 来 创建 弧 形 切 角 (很 多 人 也 把 这 种 
效果 称 为 “内 四 事 角 ”， 因 为 它 看 起 来 就 像 是 圆 角 的 反问 版 本 )。 唯 一 的 区 别 
在 于 ， 我 们 会 用 径 向 渐变 来 督 代 上 述 线性 渐变 : 











background: #58a; 
background: 
radial-gradient(circle at top left, 
transparent 15px, #58a 8) top left, 
radial-gradient(circle at top right, 
transparent 1i5px, #58a 6) top right, 
radial-gradient(circle at bottom right, 
transparent 15px, #58a 0@) bottom right, 
radial-gradient(circle at bottom left, 
transparent 15px, #58a 98) bottom left; 
background-size: 56% 56%; 
background-repeat: no-repeat; 
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你 可 以 在 图 3-31 中 看 到 效果 。 跟 前 一 段 所 述 的 技巧 类 似 ， 切 角 的 大 小 
可 以 通过 色 标 的 位 置信 息 来 控制 ， 而 且 我 们 同样 可 以 用 一 个 mixin 来 改善 这 
段 代码 的 可 维护 性 。 


7 play.csssecrets.io/scoop-corners 


内 联 SVG 与 border-image 方案 


虽然 基于 潮 变 的 方案 是 行 之 有 效 的 ， 但 也 不 是 完全 没有 问题 。 

罩 它 的 代码 还 是 非常 烦琐 元 长 的 。 在 常规 设计 中 ， 四 个 角 的 切 角 尺寸 
往往 是 一 致 的 ， 但 我 们 在 改变 这 个 值 时 仍然 需要 修改 四 处 。 与 此 类 
似 ， 我 们 在 改变 背景 色 的 时 候 也 需要 修改 四 人 处， 如 果 算 上 回 退 背景 
色 的 话 就 是 五 处 。 

罩 它 的 烦 琐 导致 我 们 完全 不 可 能 〈 在 某 些 浏览 需 下 ) 让 各 个 切 角 的 尺 
寸 以 动画 的 方式 发 生变 化 。 

谢 天 谢 地 ， 我 们 还 有 其 他 一 些 方 法 可 供 选 择 ， 具 体 采 用 哪 种 方法 取决 于 
实际 需求 。 其 中 之 一 就 是 使 用 border-image， 并 通过 一 个 内 联 的 SVG 图 像 
来 产生 切 角 效果 。 基 于 border-image 的 工作 原理 〈 如 果 对 此 有 些 淡忘 ， 不 
妨 回 头 看 看 图 3-32 的 科普 )， 你 能 想像 出 这 个 SVG 图 像 的 样子 吗 ? 


由 于 尺寸 无 关 紧 要 (border-image 会 解决 缩放 问题 ， 而 SVG 可 以 实现 
与 尺寸 完全 无 关 的 完美 缩放 一 一 这 就 是 矢量 图 的 好 处 )， 每 个 切片 的 尺寸 都 
可 以 设置 为 1， 以 便 理解 和 书写 。 切 角 的 尺寸 是 1， 和 直线 边 绿 也 都 是 1。 它 
(放大 后 〉 的 样子 如 图 3-32 所 示 。 相 应 的 代码 可 能 是 这 样 的 : 














3-30 

g2geogeske.com 网 站 很 好 地 驾 
驭 了 内 凹 圆 角 设 计 风 格 ; 设计 师 
把 它 作为 一 种 核心 设计 元 素 ， 
为 内 凹 圆 角 不 仅 出 现在 导航 中 ， 
还 出 现在 内 容 中 ， 甚 至 是 页 脚 中 
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图 3-31 
使 用 径 向 渐变 生成 的 内 止 圆 角 
效果 





图 3-32 
边框 图 像 是 基于 SVG 的 ， 切 割 线 
也 标示 了 出 来 


12 切 角 效果 


3-33 
把 我 们 的 SVG 应 用 到 border- 
image 属性 中 





3-34 

把 border-width 指 定 为 15px， 
所 产生 的 切 角 尺寸 ( 斜 向 度量 结 
果 ) 为 霹 =10606 601718 ， 这 
就 是 为 什么 它 比 前 面 的 切 角 看 起 
来 本 些 


Hey focus! You re supposed to 
be looking at my corners, not 


reading my text. The text 1s 


Just placeholder! 


3-35 
我 们 美美 的 切 角 效 果 去 哪儿 了 





border: 15px solid transparent ; 
border-image: 1 url('data:image/svg+xml,\ 
<«svg xmlns="http://www.w3.org/26000/svg" 
width="3" height="3" fill="%2358a">\ 
<polveonnonmtes om O20 Sm 23 0 20 DN 
</sve> ); 


请 注意 ， 我 们 使 用 的 切片 尺寸 是 1。 这 并 不 表示 1 像素 ; 它 所 对 应 的 是 
SVG 文件 的 坐标 系统 《因此 不 需要 单位 )。 如 琳 我 们 用 百分比 来 指定 这 些 长 
度 ， 就 只 能 采用 33.34% 这 样 的 值 来 近似 地 获得 图 像 尺 寸 的 三 分 之 一 。 近 似 
值 总 是 有 风险 的 ， 因 为 不 是 所 有 的 浏览 融和 都 使 用 相同 的 计算 精度 。 但 如 果 使 
用 SVG 文件 的 坐标 系统 作为 度量 单位 ， 我 们 就 不 用 为 此 头痛 了 。 


它 的 效 末 展示 在 图 3-33 中 。 如 你 所 见 ， 我 们 的 切 角 效果 出 来 了 了 ， 但 还 
缺少 整 片 背 景 。 我 们 有 两 种 办 法 可 以 解决 这 个 问题 : 要 么 提供 一 个 背景 色 ， 
要 么 给 border-image 属性 值 加 上 fill 关键 字 一 一 这 样 它 就 不 会 丢掉 SVG 
中 央 的 那个 切片 了 。 在 这 个 例子 中 ， 我 们 决定 指定 一 个 背景 色 ， 因 为 它 还 可 
以 发 挥 回 退 的 作用 。 


顺便 一 提 ， 你 可 能 已 经 注音 到 了 ， 我 们 的 切 角 跟前 面 的 技巧 相 比 要 小 
一 些 ， 这 仿 人 有 些 困惑 。 我 们 明明 已 经 指定 15px 作为 边框 宽度 了 啊 ! 其 
实 原因 在 于 ， 在 渐变 中 ， 这 个 15px 是 沿 着 渐变 轴 来 度量 的 ， 它 的 方 回 与 
渐变 推进 的 方 加 一致。 边框 宽度 并 不 是 和 斜 癌 度量 的 ， 而 是 以 水 平 或 垂直 方 
回来 度量 的 。 你 能 看 出 它们 的 差别 吗 ? 对 ， 我 们 又 要 请 出 万 能 的 勾 股 定理 
了 ， 我 们 在 “条 纹 背 景 ” 一 市 中 就 已 经 见 过 它 了 了 人。 图 3-34 应 该 可 以 很 好 地 
解释 这 个 问题 。 俐 而 言 之 ， 为 了 得 到 相同 的 尺寸 ， 我 们 需要 把 渐变 中 的 尺 
才 乘 以 V2 ， 然 后 才能 用 在 边框 宽度 属性 中 。 在 这 个 例子 中 ， 它 实际 上 就 是 
15x V2 = 21.213 203 436 像 素 ， 可 以 取 近 似 值 28px， 除 非 我 们 绝对 要 求 斜 向 
尺寸 严格 接近 15px: 








border: 26px solid transparent ; 
border-image: 1 url('data:image/svg+xml,\ 
<«svg xmlns="http://www.w3.org/26000/svg" 
width— 3 "neight=— 3 "Till="%2358a >\ 
<poMyeonnoamtss ORION 0 2 2 NN 
</svg>' ); 
background: #58a; 


但 是 ， 我 们 在 图 3-35 中 会 发 现 ， 这 实际 上 并 没有 得 到 我 们 期 望 的 效 来 。 
我 们 费 尽 周 折 创 建 的 切 角 效果 去 哪儿 了 啊 ? 别 担 心 ， 年 轻 人 ， 我 们 的 切 角 其 
实 就 在 那儿 。 如 果 你 把 背景 设置 为 男 一 种 颜色 ， 比 如 国 #655， 就 会 比较 容 
易 理 解 事情 的 丰 相 了。 


如 图 3-36 所 示 ， 原 来 这 是 因为 背景 色 和 切 角 边框 混成 一 团 了 。 接 下 来 
要 做 的 就 是 请 出 background-clip 来 修复 这 个 问题 ， 避 人 免 背 景色 营 延 到 边 
框 区 域 : 











border: 26px solid transparent Hey focus! You re supposed to 
border-image: 1 url('data:image/svg+xml,\ 
<svg xmlns="http://www.w3.org/26000/svg"\ 


be looking at my corners, not 





widtha= "3 "heieht= 3 Fill= X23588 > readine my text. The text 1s 
<polygonm PoOints= :65 1 130 27503 .113,223.11 30 2 />N\ just placeholder! 
</svg>' ); 
background: #58a; 
background-clip: padding-box; 图 3 36 


YY V 日 只 、 Y ~ 人 人 < 器 i V /zz |、 月 和 | 区 
这 样 一 来 ， 问 题 束 解决 了 ， 我 们 的 容 颖 现在 看 起 来 完全 束 是 图 3-29 中 ee ge ee 


的 效果 了 。 终 于 ， 我 们 做 到 了 在 改变 切 角 尺寸 时 只 改 一 处 : 只 需 修改 边框 宽 
度 就 可 以 了 。 我 们 甚至 可 以 给 它 加 上 动画 ， 因 为 border-width 属性 是 支持 
动画 的 ! 我 们 还 做 到 了 在 改变 育 景 色 时 只 改 两 处 ， 而 不 是 五 处 。 此 外 ， 由 于 Hey, focus! Youresupposed to 
痛 景 效果 跟 切 角 效果 是 相互 独立 的 ， 我 们 甚至 可 以 把 背景 设置 为 一 层 渐 变 图 be looking at my corners, not 
宁 或 者 其 他 图 条 ， 只 要 图 宁 边 绿 处 的 其 色 是 国 #58 就 行 。 来 看 看 图 3-37 这 reading my texts I he text is 
个 例子 吧 ， 它 就 使 用 了 一 幅 由 hsla(6,e%,166%, .2) 过 渡 到 transparent 的 Just Ra 

径 癌 渐变 图 案 。 


我 们 只 剩 下 最 后 一 个 小 问题 了。 在 不 支持 border-image 的 环境 下 ， 回 。 和 岂 径 向 浙 恋 冰 暴 组合 之 后 的 
退 的 结果 就 不 仅 是 没有 切 角 效果 了 。 由 于 背景 裁 切 ， 它 看 起 来 好 像 在 容器 的 加 
边缘 和 内 容 之 间 缺 了 一 圈 空 隙 。 为 了 修复 这 个 问题 ， 我 们 可 以 给 边框 指定 与 
至 是 - 致 的 颜色 : 

















图 3-37 








border: 26px solid #58a; 

border-image: 1 url('data:image/svg+xml,\ 
«svg xmlns="http://www.w3.org/26000/svg"\ 

width="3" height="3” fil]l="%2358a”">\ 

<DOMVYEoNonmtes Om NO Non 2 /NN 
</SVE> ); 

background: #58a; 

background-clip: padding-box; 


当 border-image 属性 生效 时 ， 这 个 边框 色 就 会 被 忽略 ; 但 当 border- 
image 不 文 持 时 ， 边 框 色 就 可 以 提供 一 个 更 加 平稳 的 回 退 措施 ， 此 时 的 结 
如 图 3-35 所 示 。 不 过 随 之 来 而 的 一 个 缺点 就 是 ， 当 我 们 改变 背景 色 时 要 修 
改 的 地 方 会 增加 到 三 处 。 
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向 Martijn Saly 《http://twitter.com/martijnsaly〉 脱 帆 致 教 ， 感 谢 他 在 2015 年 
1 月 5 日 的 一 条 推 文 (http://twitter.com/martijnsaly/status/552152520114855936) 








中 首次 提出 用 border-image 和 内 联 SVG 实现 斜面 切 角 的 创意 。 致 向 
裁 切 路 径 方案 


前 面 所 述 的 border-image 方案 确实 非常 紧凑 ， 也 比较 DRY， 但 它 还 是 
存在 一 些 局 限 。 举 个 例子 ， 我 们 要 么 指定 某 个 实 色 的 背景 ， 要 么 指定 一 个 边 











级 接近 东 个 实 色 的 背景 图 案 。 假 如 我 们 想 设置 其 他 类 型 的 背景 (比如 纹理 、 
平 铺 图 案 或 一 道 线 性 渐变 )， 又 该 如 何 ? 

有 万 外 一 种 方法 不 存在 这 种 局 限 ， 但 有 着 它 上 自己 独 有 的 局 限 。 还 记得 我 
们 在 “ 帮 形 图 片 ”中 用 到 的 clip-path 属性 吗 ? CSS 裁 切 路 径 最 神奇 的 地 
方 在 于 我 们 可 以 同时 使 用 百分比 数值 〈 它 会 以 元 素 目 且 的 宽 高 作为 基数 度 进 
行 换算 ) 和 绝对 长 度 值 ， 从 而 提供 巨大 的 灵活 性 。 


举 个 例子 ， 如 采用 裁 切 路 径 将 一 个 元 素 切 出 28px 大 小 《以 水 平方 回 度 
量 ) 的 斜面 切 角 ， 代 码 可 能 如 下 : 




















不 完全 支持 








background: #58a; 

clip-path: polygon( 
20pX 6，Ccalc(166% - 26px) 6，166% 26pX， 
166% calc(166% - 26px), calc(166% - 26px) 1662%， 
20pXx 166%, 8 calc(166% - 26px), 0 26pXx 





尽管 这 种 方法 的 代码 确实 短 了 很 多 ， 但 这 并 不 意味 着 它 是 DRY 的。 如 
果 你 不 用 预 处 理 袁 ， 这 就 是 它 最 大 的 人 缺陷。 实际 上 ， 它 是 本 节 所 述 的 所 有 
纯 CSS 方案 中 最 不 DRY 的 ， 因 为 如 果 要 改动 切 角 的 尺寸 ， 我 们 需要 修改 八 
处 ! 不 过 另 一 方面 ， 改 变 背 景 倒 是 变 得 比较 方便 ， 只 需 修改 一 处 即 可 。 


这 个 方法 最 大 的 好 处 在 于 ， 我 们 可 以 使 用 任意 类 型 的 背景 ， 甚 至 可 以 对 
蔡 换 元 素 〈 比 如 图 片 ) 进行 裁 切 。 看 看 图 3-38 的 这 个 例子 ， 它 给 一 张 图 片 
设置 了 斜面 切 角 样式 。 前 面 提 到 的 任何 一 种 方法 都 做 不 到 这 一 点 。 此 外 ， 这 
运用 lio.oath 属性 给 _ 张 图 片 ”种 方法 还 是 支持 动画 效果 的 ， 我 们 不 仅 可 以 用 动画 的 方式 来 改变 切 角 的 尺 
没 置 斜面 切 角 样式 寸 ， 还 可 以 彻底 变换 裁 切 形状 。 我 们 只 需要 为 动画 的 终止 状态 指定 另 一 条 裁 
切 路 径 即 可 。 


暂且 不 提 代 码 不 够 DRY 以 及 训 览 名 文 持 程度 上 的 不 足 ， 它 还 有 一 个 更 
大 的 缺点 ， 就 是 当 内 边 距 不 够 宽 时 ， 它 会 裁 切 挥 文本 ， 因 为 它 只 能 对 元 系 做 
统一 的 裁 切 ， 并 不 能 区 分 元 素 的 各 个 部 分 。 与 此 不 同 的 是 ， 渐 变 方 案 人 允许 文 
字 溢 出 并 超出 切 角 区 域 ( 因 为 它 只 是 背景 图 案 ); 而 border-image 方案 则 
会 起 到 普通 边框 的 作用 ， 令 文字 折 行 。 


关于 未 来 本 允 瑟 4 


未 来 ， 我 们 再 也 不 需要 费 尽 心机 地 动用 CSS 渐变 、 裁 切 或 SVG 来 实现 这 个 效果 了 。CSS 背景 与 边框 〈 第 
四 版 ) ( http:/dev.w3.org/csswg/css-backgrounds-4/ ) 将 引入 一 个 全 新 的 属性 corner-shape， 可 以 彻 
底 解 决 这 个 痛 点 。 这 个 属性 需要 跟 border-radius 配合 使 用 ， 从 而 产生 各 种 不 同形 状 的 切 角 效 果 ， 而 切 
角 的 尺寸 正 是 border-radius 的 值 。 举 例 来 说 ， 为 容 怖 的 四 个 角 指 定 15px 的 笠 面 切 角 就 是 如 此 简单 ， 


























:15px; 
: bevel; 
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CSS 育 景 与 边框 
http://w3.o0org/TR/css-backgrounds 


CSS 图 像 
http://w3.0org/TR/css-images 


| CSS 变形 
http://w3.org/TR/css-transforms 


CSS 庶 章 
http://w3.0org/TR/css-masking 


| CSS 过 渡 
http://w3.0org/TR/css-transitions 

CSS 背景 与 边框 (第 四 版 ) 
http://dev.w3.org/csswg/css-backgrounds-4 


基本 的 3D 变形 ， 平行 四 边 形 


难题 
Trapezold 
梯形 的 定义 甚至 比 平行 四 边 形 还 要 宽泛 一 些 ， 一 个 四 边 形 只 要 有 两 条 边 











是 平行 的 ， 就 可 以 称 作 梯 形 ， 另 外 两 条 边 可 以 是 任意 角度 。 一 直 以 来 ， 梯 形 图 3-39 

都 是 众所周知 难以 用 CS5 生成 的 形状 ， 尺 管 它 也 十 分 第 用; 尤其 是 对 于 标 通过 伪 元 素 的 边框 模拟 出 的 梯形 
签 页 来 说 。 网 页 开发 者 如 果 没 有 用 精心 设计 的 背景 图 片 来 实现 楷 形 ， 那 多 半 (为 了 看 得 更 清楚 ， 伪 元 素 用 深 色 
就 是 在 用 边框 来 模拟 梯形 两 侧 的 斜 边 (参见 图 3-39)。 标示 ) 


13 梯形 标签 页 





3-40 
在 Cloud9 IDE ( http://c9.io ) 中 ， 
每 个 打开 的 文档 都 会 分 配 一 个 梯 
形 标签 页 


图 3-41 

css-tricks.com 网 站 的 早期 设计 也 
采用 了 梯形 标签 页 ， 不 过 只 有 一 
条 边 是 倾斜 的 





尽管 这 个 技巧 为 我 们 节省 了 背景 图 片 所 产生 的 额外 HITP 请 求 ， 并 且 

可 以 很 容易 地 适应 不 同 的 宽度 ， 但 它 还 不 是 最 佳 方案 。 它 用 光 了 仅 有 的 两 个 

伪 元 素 ， 而 且 在 样式 层面 上 也 不 够 灵活 。 举 个 例子 ， 当 我 们 要 给 棉 形 标签 页 

增加 一 圈 边 框 、 一 层 纹理 背景 ， 或 者 要 在 其 顶部 设置 圆 角 时 ， 束 只 能 目 求 多 
福 了 了。 

由 于 实现 梯形 的 所 有 篆 见 技巧 都 比较 杂乱 ， 或 者 很 难 维护 ， 我 们 在 网 

上 看 到 的 绝 大 多 数 标签 页 都 不 是 倾 料 届 

的 。 有 没有 一 种 合理 而 义 灵 活 的 方法 来 实现 梯形 的 标签 页 呢 ? 



































三 | Cloud9 File Edit Find View Goto Run Tools Window Help Preview » 
3 v Bl cubic-bezer 3%”| 担 Welcome x chainvas.min.js x cubic-bezier.js x environmentjs index.html x Preferences 
2 *> | chainyas,min,js 
2 cubic-bezier.is 
environment.js 3 
芝 Lindex.html 
中 sa 国 Welcome 
3 style.css 
E€ Welcome to Cloud9. Use this welcome screen to tweak the look & feel of the Cloud9 user interface. 
8 
bash - “leaverou-cut x Immediate 
leaverou@cubic-bezier:~/workspace (master) $ [ 
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Datalists for Different Input Types 不 


Isawan HTMLS date input the other day, which had the dropdown arrow on the right, which I've 
grown accustom to clicking to reveal a calendar datepicker in which to choose a date. 


treehouse 


Typically that looks like this:.…. 
Leaming changes lives! 


Read Article — 





How SVG Shape Morphing Works 


解决 方案 
如 采 有 一 组 2D 变形 属性 可 以 生成 一 个 标 形 ， 我 们 就 可 以 利用 “平行 四 
乡 ”涉及 的 拉 巧 来 达到 目的 。 然 而 遗憾 的 是 并 没有 。 
试想 在 现实 的 三 维 世界 中 旋转 一 个 和 矩形。 由 于 透视 的 关系 ， 我 们 最 终 看 
到 的 二 维 图 像 往 往 就 是 一 个 梯形 ! 谢 天 谢 地 ， 我 们 可 以 在 CSS 中 用 3D 旋转 
来 模拟 出 这 个 效果 : 








transform: perspective(.5em) rotateX(5deg); 


你 可 以 在 图 3-42 中 看 到 这 行 代码 所 生成 的 梯形 。 当 然 ， 由 于 我 们 是 对 





整个 元 素 应 用 3D 变形 的 ， 因 此 它 上 面 的 文字 也 变形 了 。 对 元 素 使 用 了 3D 
变形 之 后 ， 其 内 部 的 变形 效应 是 “不 可 逆转 ”的 ， 这 一 点 跟 2D 变形 不 同 
(在 2D 变形 的 体系 之 下 ， 内 部 的 逆向 变形 可 以 抵消 外 部 的 变形 效应 )。 取 消 
其 内 部 的 变形 效应 在 技术 上 是 有 可 能 的 ， 但 非 稼 复杂 。 因 此 ， 如 采 我 们 想 发 
挥 3D 变形 的 功能 来 生成 梯形 ， 唯 一 可 行 的 途径 就 是 把 变形 效果 作用 在 伪 元 
素 上 。 这 有 些 类 似 于 我 们 在 “平行 四 边 形 ” 一 节 中 生成 平行 四 边 形 的 方法 : 


.tab { 
position: relative; 
display: inline-block; 
padding: .5em lem .35em; 
color: white; 


| 


.tab::before { 
content: ''; /* 用 伪 元 素来 生成 一 个 矩形 */ 
position: absolute; 
top: 6; right: 6; bottom: 6; left: ©; 
z-index: -1; 
background: #58a; 
transform: perspective(.5em) rotateX(5deg); 


) 


正如 我 们 在 图 3-43 中 所 看 到 的 ， 这 个 方法 确实 可 以 生成 一 个 基本 的 梯 
形 。 但 还 有 一 个 问题 没有 解决 。 当 我 们 没有 设置 transform-origin 属性 
时 ， 应 用 变形 效果 会 让 这 个 元 系 以 它 自 旱 的 中 心 线 为 轴 进 行 空 间 上 的 旋转 。 
因此 ， 元 系 投 射 到 2D 屏保 上 的 尺寸 会 发 生 多 种 变化 ， 如 图 3-44 所 示 : 它 
的 宽度 会 增加 ， 它 所 占据 的 位 置 会 稍稍 下 移 ， 它 在 高 度 上 会 有 少许 缩减 ， 等 
等 。 这 些 变化 导致 它 在 设计 上 很 难 控制 。 


为 了 让 它 的 太 才 更 好 擎 握 ， 我 们 可 以 为 它 指定 transform-origin: 
bottom;， 当 它 在 3D 空间 中 旋转 时 ， 可 以 把 它 的 底 边 固定 住 。 你 可 以 在 图 
3-45 中 看 到 这 个 差异 。 现 在 它 看 起 来 就 直观 多 了 ， 只 有 高 度 会 发 生变 化 。 
不 过 这 样 一 来 ， 高 度 的 缩水 会 变 得 更 加 显眼 ， 因 为 现在 整个 元 素 是 转 离 屏幕 
前 的 观众 的 ; 而 在 之 前 ， 元 系 的 上 半 部 分 会 转 问 屏 硕 后 面 ， 下 半 部 分 会 转 出 
屏幕 。 相 比 之 下 ,， 在 3D 空间 中 ， 之 前 的 元 素 总 体 上 是 离 观众 更 近 的 。 为 了 
纠正 这 个 问题 ， 我 们 可 能 会 想到 给 元 素 增 加 额外 的 项 部 内 边 距 。 不 过 在 那 
些 不 支持 3D 变形 的 浏览 器 中 ， 结 果 看 起 来 会 很 怪异 (参见 图 3-46)。 我 们 
还 可 以 换 种 思路 ， 同 样 通过 变形 属性 来 改变 它 的 尺寸 。 这 样 一 来 ， 如 果 浏 览 
器 不 支持 3D 变形 ， 则 所 有 的 变形 属性 都 会 被 丢弃 ， 从 而 显示 出 它 朴 素 的 本 
来 面 上 日 。 经 过 一 番 试 验 之 后 ， 我 们 会 发 现 ， 垂 直方 向 上 的 缩放 程度 (也 就 是 
scaleY() 变形 属性 ) 在 达到 130% 左右 时 刚好 可 以 补足 它 在 高 度 上 的 缩水 : 














transform: scaleY(1.3) perspective(.5em) 
rotateX(5deg); 
transform-origin: bottom; 
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3-42 

使 用 3D 旋转 来 创建 一 个 梯形 。 
上 图 : 处 理 之 前 

下 图 : 处 理 之 后 
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3-43 
如 果 只 对 伪 元 素 生 成 的 方块 应 用 
3D 变形 样式 ， 文 本 就 不 受 影响 了 
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我 们 把 伪 元 素 变形 前 后 的 形状 重 
村 起 来 ， 以 便 标示 出 它 在 尺寸 上 
的 变化 


TRAPEZOID 





图 3-45 

我 们 把 伪 元 素 变形 前 后 的 形状 重 
于 起 来 ， 以 便 标示 出 它 在 尺寸 上 
的 变化 ( 此 时 使 用 了 transform- 
origin: bottom; 属性 ) 


TRAPEZOID 


TRAPEZOID 


图 3-46 
用 额外 的 内 边 距 来 修复 这 个 问 
题 ， 但 会 导致 它 的 回 退 样式 很 怪 
异 ( 上 图 ) 


AD 
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图 3-47 
使 用 scale() 来 弥补 高 度 上 的 缩 
水 ， 这 种 方法 的 回 退 样式 要 好 得 
多 ( 上 图 ) 


图 3-48 
这 个 技巧 最 大 的 优点 在 于 样式 层 
面 上 极 大 的 灵活 性 


第 3 章 形状 


你 可 以 在 图 3-47 中 看 到 它 的 效果 ， 以 及 它 的 回 退 样式 。 到 了 这 里 ， 我 
们 好 像 才 在 视觉 效果 上 奶 平 了 本 市 开头 所 提 到 的 基于 边框 的 方案 ， 只 不 过 在 
语法 上 ， 这 个 方法 要 更 加 和 侧 明 一 些 。 其 实 ， 当 你 开始 为 标签 页 增加 一 些 样 式 
的 时 候 ， 这 个 技 马 的 独特 优势 才 会 逐渐 显现 出 来 。 举 例 来 次 ， 下 面 这 段 代 码 
会 给 标签 页 添加 图 3-48 中 的 那些 样式 : 


nav > aft 
position: relative; 
display: inline-block; 
padding: .3em lem 6; 


nav > a::before { 

content: ''; 

position: absolute; 

top: 6; right: 6; bottom: 6; left: 8; 

z-index: -1; 

background: #ccc; 

background-image: linear-gradient( 
hsla(0,06%,106%, .6), 
hs1a(6,6%,166%,8) ) ; 

border: 1px solid rgba(6,96,96,， .4) ; 

border-bottom: none ; 

border-radius: .5em .5em 8 ©; 

box-shadow: 6 .15em white inset; 

transform: perspective(.5em) rotateX(5deg); 

transform-origin: bottom; 


Content area 





如 你 所 见 ， 我 们 给 它 添加 了 背景 、 边 框 、 圆 角 、 投 影 等 一 系列 样式 。 
它们 都 可 以 完美 生效 ! 不 仅 如 此 ， 我 们 只 需要 把 transform-origin 改 成 
bottom left 或 bottom right， 就 可 以 立即 得 到 左 侧 倾斜 或 右 侧 倾 糙 的 标 
签 页 〈 参 见 图 3-49) ! 


尽管 优点 多 多 ， 但 这 个 技巧 也 不 是 完美 无 缺 的 。 它 存在 一 个 非常 大 的 
缺点 : 斜 边 的 角度 依赖 于 元 素 的 宽度 。 因 此 ， 当 元 素 的 内 容 长 度 不 等 时 ， 想 
要 得 到 和 斜 度 一 致 的 梯形 就 很 伤 脑筋 了 。 不 过 ， 对 于 宽度 变化 不 大 的 多 个 元 素 
《比如 导航 计 单 ) 来 资 ， 这 个 方法 还 是 非 稼 管用 的 。 在 这 种 场景 下 ， 和 斜 度 的 
差异 非常 难以 察觉 。 













图 3-49 
只 要 改变 transform-origin 就 
可 以 得 到 单 侧 倾斜 的 标签 页 


Projects 


Content area 


Projects 


Content area 


play.csssecrets.io/trapezoid-tabs 


图 CSS 变形 


http://w3.org/TR/css-transforms 
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CSS 渐变 ， 基 本 的 SVG，CSS 动画 , “条 纹 背景 ",“ 自 适应 的 椭圆 ” 





14 简单 的 饼 图 





3-50 
我 们 的 起 点 ( 或 者 把 它 看 成 一 个 
比率 为 0 的 饼 图 ) 


难 十 


饼 图 在 网 页 中 的 运用 极为 普 沉 ， 比 如 简单 的 统计 图 表 、 进 度 指示 人 迄 、 定 
时 各 等 ， 不 一 而 是 。 尺 管 如 此 ， 人 饼 图 在 过 去 很 长 一 段 时 期 内 完全 无 法 通过 
Web 技术 创建 出 来 ， 即 便 是 最 简单 的 两 种 颜色 的 形态 也 不 例外 。 


过 去 要 实现 饼 图 ， 要 么 动用 一 个 外 部 的 图 像 处 理 软 件 来 为 饼 图 中 的 
多 个 值 制作 多 张 图 片 ， 要 么 动用 那些 专门 为 复杂 图 表 而 设计 的 JavaScript 
框 染 。 

尽管 这 件 事 情 已 经 不 像 过 去 那样 “难于 上 青天 ” 但 也 仍然 不 存在 “一 
行 代 码 万 事 大 吉 ” 的 捷径 。 不 过 总 的 来 说 ， 眼 下 已 经 有 一 些 更 便捷 、 更 易 维 
护 的 方法 来 实现 饼 图 了 。 

















基于 transform 的 解决 方案 

这 个 方案 在 结构 层面 是 最 佳 选择 : 它 只 需要 一 个 元 素 作 为 容 肯 ， 而 其 他 
部 分 是 由 伪 元 素 、 变 形 属性 和 CSS 渐变 来 实现 的 。 让 我 们 先 从 一 个 简单 的 
元 素 开 始 : 


<div class="pie"></div> 
假设 我 们 目前 的 需求 是 一 个 最 人 简 蛙 的 饼 图 ， 其 展示 的 比 座 是 固定 的 


20%; 稍 后 再 来 改进 它 的 灵活 性 。 我 们 首先 把 这 个 元 系 设 置 为 一 个 圆 形 ， 以 
它 作为 背景 〈 参 见 图 3-50 ) : 








.Pie { 
width: 1660px;j height: 166px; 
border-radius: 56%; 
background: yellowgreen,; 


} 


我 们 的 饼 图 是 绿色 的 (确切 地 说 是 电 yellowgreen)， 并 将 采用 棕色 
( 国 #655) 来 显示 比率 。 我 们 首先 可 能 会 想到 用 和 斜 癌 拉 伸 变 形 来 处 理 比 率 记 
区 ， 但 稍 加 尝试 就 会 发 现 ， 这 其 实 是 一 条 死胡同 。 于 是 我 们 换 种 思路 ， 把 同 
形 的 左右 两 部 分 指定 为 上 述 两 种 颜色 ， 人 然后 用 伪 元 素 覆 盖 上 去 ， 通 过 旋转 来 
决定 露出 多 大 的 扇 区 。 


为 了 把 圆 形 的 右 半 部 分 设置 为 标 色 ， 我 们 要 用 到 一 个 简单 的 线性 渐变 : 








background-image: 
linear-gradient(to right, transparent 56%, #655 0); 


在 图 3-51 中 可 以 看 到 ， 其 绪 末 正 是 我 们 所 需要 的 。 接 下 来 ， 我 们 可 以 
继续 设置 伪 元 素 的 样式 ， 让 它 起 到 相关 层 的 作用 : 


.pie::before { 
content: ''; 
display: block; 
margin-left: 56%; 
height: 166%; 

} 


可 以 在 图 3-52 中 看 到 ， 我 们 的 伪 元 取现 在 相对 于 整个 饼 图 进行 了 重 辣 。 
不 过 现在 还 没有 设置 任何 样式 ， 它 还 起 不 到 遮盖 的 作用 : 暂时 只 是 一 个 透明 
的 矩形 。 在 开始 为 它 设 置 样式 之 前 ， 我 们 还 要 再 做 一 些 观 察 和 分 析 。 
图 我 们 希望 它 能 庶 盖 圆 形 中 的 棕色 部 分 ， 因 此 应 该 给 它 指定 绿色 背景 。 
在 这 里 使 用 background-color: inherit 声明 可 以 避免 代码 的 重 
复 ， 因 为 我 们 布 望 它 的 背景 色 与 其 宿主 元 系 保 持 一 致 。 
加 我 们 希望 它 是 绕 着 圆 形 的 圆心 来 旋转 的 ， 对 它 上 自己 来 说 ， 这 个 点 就 
是 它 左边 绿 的 中 心 点 。 因 此 ， 我 们 应 该 把 它 的 transform-origin 
设置 为 6 56%， 或 者 干脆 写成 left。 
加 我 们 不 布 望 它 呈 现 出 和 矩形 的 形状 ， 否 则 它 会 突破 整个 饼 图 的 圆 形 范 
围 。 因 此 要 么 给 .pie 设置 overflow: hidden 的 样式 ， 要 入 给 这 个 
伪 元 素 指定 合适 的 border-radius 属性 来 把 它 变 成 一 个 半圆 。 


绽 合 上 面 的 思路 ， 这 个 伪 元 系 的 CSS 就 确定 下 来 卫 : 

















.pie::before { 
content: ''; 
display: block; 
margin-left: 56%; 
height: 166%; 
border-radius: 6 166% 166% 8 / 56%; 
background-color: inherit; 
transform-origin: left; 


} 


我 们 的 饼 图 看 起 来 就 是 图 3-53 中 的 样子 了 。 接 下 来 ， 美 好 的 事情 即将 
发 生 ! 我 们 现在 可 以 通过 一 个 rotate() 变形 属性 来 让 这 个 伪 元 素 转 起 来 。 
如 果 我 们 要 显示 出 20% 的 比率 ， 我 们 可 以 指定 旋转 的 值 为 72deg (0.2 x 
360 = 72)， 写 成 .2turn 会 更 加 直观 一 些 。 在 图 3-54 中 ， 你 还 可 以 看 到 其 
他 一 些 旋 转 值 的 情况 。 


你 可 能 以 为 这 就 大 功 告 成 了 ， 但 事实 上 我 们 才刚 刚 开 了 个 涉 。 我 们 的 饼 
图 在 显示 0 到 50% 的 比率 时 运作 良好 ， 但 如 果 我 们 尝试 显示 60% 的 比率 时 
(比如 指定 旋转 值 为 .6turn 时 )， 绪 果 就 变 成 如 图 3-55 所 示 了。 不 过 也 别 汇 
气 ， 我 们 一 定 能 够 排除 万 难 修复 这 个 问题 ! 


如 果 把 50%~100% 的 比率 看 作 男 外 一 个 问题 ， 我 们 就 会 发 现 ， 可 以 使 
用 上 述 技巧 的 一 个 反 向 版 本 来 实现 这 个 范围 内 的 比率 : 设置 一 个 棕色 的 伪 
元 素 ， 让 它 在 8 至 .5turn 的 范围 内 旋转 。 因 此 ， 要 得 到 一 个 60% 比率 的 饼 
图 ， 伪 元 素 的 代码 可 能 是 这 样 的 : 














3-51 
用 一 个 简单 的 线性 渐变 来 把 图 形 
的 右 半 部 分 设置 为 棕色 





图 3-52 
把 伪 元 素 当 作 遮 盖 层 来 用 ， 它 的 
位 置 用 虚线 框 标示 


@@ 不 要 在 这 里 用 background: 


而 应 该 用 backgr- 
ound-color: inherit:， 否 则 渐 


变 背 景 也 会 被 继承 过 来 。 


inherit;, 





3-53 
设置 好 样式 之 后 的 伪 元 素 ， 用 虚 
线 框 标示 


全 -一直 








3-54 
我 们 的 简单 饼 图 可 以 显示 出 不 同 的 
比率 了 ; 从 上 到 下 分 别 是 : 10% 
(36deg 或 .Iturn ) 20% ( 72deg 
或 .2turn )、40% (144deg 
或 .4turn ) 


3-55 
当 比 率 大 于 50% 时 ， 我 们 的 饼 
图 就 和 朋 坏 了 ( 这 里 演示 的 是 60% 
的 情况 ) 


人 /A 二 二 > 
po mm | ~ co yo mg = 
EE ,3 S Tz 人 
3 I 一 一 11 /NN 





.pie::before { 
content: ''; 
display: block; 
margin-left: 56%; 
height: 166%; 
border-radius: 6 166% 166% 0 / 56%; 
background: #655; 
transform-origin: left; 
transform: rotate(.1turn); 


} 





你 可 以 在 图 3-56 中 看 到 它 的 实际 效果 。 由 于 已 经 找到 了 实现 任意 比率 
的 方法 ， 我 们 甚至 可 以 用 CSS 动画 来 实现 一 个 饼 图 从 0 变化 到 100% 的 动 
画 ， 从 而 得 到 一 个 炫 酶 的 进度 指示 器 : 


@keyframes spin { 


to { transform: rotate(.5turn); } 


} 


@keyframes bg { 
56% { background: #655; } 


} 


.pie::before { 

content: ''; 

display: block; 

margin-left: 56%; 

height: 166%; 

border-radius: 6 166% 166% 8 / 56%; 

background-color: inherit ; 

transform-origin: left; 

animation: spin 3s linear infinite， 
bg 6s step-end infinite; 


play.csssecrets.io/pie-animated 


这 个 效 采 很 棱 ， 但 我 们 怎样 才能 制作 出 多 个 不 同比 率 的 静态 饼 图 呢 ? 
《这 似乎 才 是 更 加 稼 见 的 需求 。) 理想 情况 下 ， 我 们 和 希望 可 以 用 这 样 的 方式 来 
书写 结构 : 


<div class="pie">26%</div> 
<div class="pie">66%</div> 


然后 就 能 得 到 两 个 饼 图 ， 一 个 展示 为 20%， 居 一 个 展示 为 60%。 前 和 完 ， 
我 们 需要 探索 如 何 用 内 联 样 式 来 实现 这 个 需求 ， 接 下 来 ， 我 们 就 可 以 写 一 小 
段 脚 本 来 解析 文本 内 容 并 把 内 联 样式 添加 到 元 素 上 去 ， Ne 
性 、 封 装 抽象 度 、 可 维护 性 ， 以 及 可 能 是 ) 最 重要 的 一 点 一 一 可 访问 性 。 

用 内 联 梓 式 来 控制 饼 图 的 比率 市 来 了 一 个 很 大 的 挑战 ， 这 些 负 责 设 置 比 


率 的 CSS 代码 最 终 是 要 应 用 到 伪 元 系 号 上 的 。 你 可 能 已 经 知道 了 ， 我 们 无 
法 为 伪 元 素 设置 内 联 样式 ， 因 此 还 要 开动 脑筋 寻找 对 策 。 

















解决 方案 恰恰 来 源 于 一 个 看 似 最 不 沾边 的 地 方 。 我 们 将 使 用 上 面 刚刚 
用 到 的 那个 动画 ， 但 动画 必须 处 于 暂停 状态 。 跟 常规 情形 下 我 们 让 动画 动 起 
来 的 做 法 不 一 样 ， 这 里 我 们 要 用 负 的 动画 延 时 来 直接 跳 至 动画 中 的 任意 时 间 
点 ， 并 且 定 格 在 那里 。 很 难 理解 ? 别 担心 ， 先 来 看 看 人 负 的 animation-delay 
在 规范 中 的 解释 。 


“一 个 负 的 延 时 值 是 合法 的 。 与 08 的 延 时 类 似 ， 它 意味 着 动画 会 立即 
开始 播放 ， 但 会 自动 前 进 到 延 时 值 的 绝对 值 处 ， 就 好 像 动画 在 过 去 已 经 播 
放 了 指定 的 时 间 一 样 。 因 此 实际 效果 就 是 动画 跳 过 指定 时 间 而 从 中 间 开 始 
播放 了 。” 








一 一 CSS 动画 (第 一 版 〉(http://w3.org/TR/css-animations/ 


#animation-delay ) 


因为 我 们 的 动画 是 暂停 的 ， 所 以 动画 的 第 一 帧 (由 人 负 的 animation- 
delay 值 定义 ) 将 是 唯一 显示 出 的 那 一 帧 。 在 饼 几 上 显 出 的 比率 就 是 我 们 的 
animation-delay 值 在 总 的 动画 持续 时 间 中 所 占 的 比率 。 举 例 来 说 ， 如 果 动 
画 持 续 时 间 定 为 6s， 我 们 只 需要 把 animation-delay 设置 为 -1.2s， 就 能 
显示 出 20% 的 比率 。 为 了 简化 这 个 计算 过 程 ， 我 们 可 以 设置 一 个 长 达 188s 
的 持续 时 间 。 别 忘 了， 这 里 的 动画 是 永远 处 在 暂停 状态 的 ， 因 此 我 们 指定 的 
持续 时 间 并 不 会 产生 其 他 副作用 。 


现在 还 剩 最 后 一 个 问题 : 动画 是 作用 在 伪 元 素 上 的 ， 但 我 们 希望 最 终 
内 联 样式 可 以 设置 在 .pie 元 素 上 。 不 过 ， 由 于 <div> 上 并 没有 任何 动画 效 
末 ， 我 们 可 以 用 内 联 样 式 的 方式 为 其 设置 animation-delay 属性 ， 然 后 再 
在 伪 元 素 上 应 用 animation-delay: inherit; 属性 。 综 合 以 上 要 素 ， 如 果 
要 让 人 饼 图 显示 为 20% 和 60%， 则 结构 代码 为 : 





<div class="pie" 

style="animation-delay: -26s"></div> 
<div class="pie" 

style="animation-delay: -66s"></div> 


我 们 刚刚 为 动画 准备 的 CSS 代码 就 会 变 成 ‘这 里 省 去 .pie 的 相关 样 
式 ， 因 为 跟前 面相 比 没有 变化 ) : 


@keyframes spin { 
to { transform: rotate(.5turn); } 


} 


@keyframes bg { 
56% { background: #655; } 
} 


.Pie::before { 
/* [其 余 的 样式 代码 保持 原样 ] */ 
animation: spin 56s linear infinite, 
bg 166s step-end infinite; 
animation-play-state: paused ; 





3-56 
我 们 最 终 得 到 了 正确 的 60% 人 饼 图 


你 可 以 把 这 个 技巧 应 用 到 其 
他 场景 中 ， 比 如 你 想 从 一 条 渐变 
中 摘出 几 个 颜色 值 而 不 想 产 生 重 
复 的 代码 或 者 复杂 的 计算 ， 又 或 
者 你 想 以 步 进 的 方式 来 调试 动画 ， 
等 等 。 在 play.csssecrets.io/ 
static-interpolation 中 ， 我 为 
这 个 技巧 制作 了 一 个 单独 的 简化 


示例 。 








20% 





60%o 


3-57 
文本 内 容 在 隐藏 之 前 的 样子 


animation-delay: inherit; 


} 











此 时 ， 我 们 就 可 以 再 次 优化 结构 ， 把 饼 图 的 比率 写 到 元 系 的 内 容 
中 ， 就 像 我 们 最 开始 所 期 望 的 那样 ， 然 后 我 们 通过 一 段 人 简单 的 脚本 来 把 
animation-delay 写 到 内 联 样式 中 : 


$$('.pie').forEach(function(pie) { 
var p = parseFloat(pie.textContent); 
pie.style.animationDelay = '-" +p+'s'; 


I 








请 注意 ， 我 们 原封 不 动 地 保留 了 文字 ， 因 为 我 们 需要 它 来 确保 可 访问 性 
和 可 用 性 。 目 前 ， 我 们 的 饼 图 看 起 来 就 是 图 3-57 这 样 的 效果 。 我 们 可 以 利 
用 color: transparent 来 把 文字 隐藏 起 来 ， 同 时 还 保证 了 可 访问 性 ， 因 为 
此 时 文字 仍然 是 可 以 被 选中 和 打印 的 。 我 们 还 可 以 进一步 优化 ， 把 比率 文字 
放置 在 饼 图 的 中 心 处 ， 从 而 方便 用 户 选中 它 。 为 了 实现 这 一 点 ， 我 们 需要 进 
行 以 下 步 又 。 

罩 把 这 个 饼 图 的 height 换 成 line-height (或 者 添加 一 个 跟 height 
相等 的 1ine-height 属性 ， 但 这 会 增加 无 意义 的 代码 重复 ; 其 实 
line-height 本 身 就 可 以 起 到 设置 高 度 的 作用 )。 

加 通过 绝对 定位 来 完成 对 伪 元 系 的 尺寸 设置 和 和 定位 操作 ， 这 样 它 就 不 
会 把 文字 推 到 下 面 了 。 

国 增加 text-align: center; 来 实现 文字 的 水 平 居 中 。 

最 终 代 人 码 看 起 来 会 是 这 样 的 : 























.pie { 
position: relative; 
width: 166px; 
line-height: 166px; 
border-radius: 56%; 
background: yellowgreen; 
background-image: 
linear-gradient(to right, transparent 56%, #655 0); 
color: transparent; 
text-align: center; 


上’ 


@keyframes spin { 

to { transform: rotate(.S5turn); } 
} 
@keyframes bg { 

56% { background: #655; } 


} 


.pie::before { 
content: ''; 
position: absolute; 
top: 0; left: 56%; 


width: 56%; height: 166%; 
border-radius: 8 166% 166% 8 / 56%; 
background-color: inherit; 
transform-origin: left; 
animation: spin 56s linear infinite， 
bg 166s step-end infinite; 
animation-play-state: paused; 
animation-delay: inherit; 


play.csssecrets.io/pie-static 


SVG 解决 方案 


SVG 的 出 现 让 很 多 图 形 的 制作 任务 变 得 简单 ， 饼 图 也 不 例外 。 不 过 ， 
我 们 这 里 并 不 打算 用 纯粹 的 矢量 路 径 来 绘制 饼 图 ， 因 为 需要 一 些 复杂 的 计 
算 。 我 们 将 换 用 一 个 更 加 巧妙 的 方法 。 


自 先 从 一 个 圆 形 开 始 : 





<svg width="16060" height="106060"> 
<circle t= "30 x="50 3Cy= "50 /> 








</Svg> 3-58 

y ph 我 们 的 起 点 : 一 个 绿色 的 SVG 
然后 ， 给 它 添加 一 些 基 本 衣 0, 
然后 ， 给 它 深 加 一 时 基本 的 样式 形 ， 有 一 道 粗 粗 的 国 #655 描 边 
circle { 


fill: yellowgreen; 
stroke: #655; 
stroke-width: 36; 


} 


你 可 以 在 图 3-58 看 到 这 个 加 了 描 边 的 圆 形 。SVG 的 描 边 效果 并 不 仅仅 
由 stroke 和 stroke-width 组 成 。 还 有 很 多 不 那么 为 人 所 知 的 属性 可 以 微 
调 描 边 的 效 采 ， 其 中 之 一 就 是 stroke-dasharray， 它 是 为 虚线 描 边 而 准备 
的 。 举 个 例子 ， 我 们 可 以 这 样 使 用 它 : 





stroke-dasharray: 26 16; 


这 行 代 码 表示 我 们 想 让 虚线 的 线段 长 度 为 28 且 间 际 长 度 为 68， 如 图 
3-59 所 示 。 看 到 这 里 ， 你 可 能 开始 纳 间 了， 这 些 关 于 SVG 摘 边 的 基础 知识 
到 底 跟 我 们 想 要 的 饼 图 有 什么 关系 ? 当 我 们 把 这 个 虚线 描 边 的 线段 长 度 指 
定 为 89， 并 有 旦 把 虚线 间 际 的 长 度 设 置 为 等 于 或 大 于 整个 圆周 的 长 度 时 ， 答 案 
吕 会 译 出 水 面 了 。《 这 里 做 个 简单 的 计算 ， 圆 形 的 周 长 C = 2rr， 因 此 在 这 里 ”图 3-59 
C=2n x 30~ 189,.) 通过 stroke-dasharray 可 以 生 

成 一 道 简 单 的 虚线 描 边 








中 你 可 能 已 经 了 解 ， 这些 CSS 属性 同样 也 可 以 作为 标签 属性 添加 到 SVG 元 素 上 。 在 对 代码 的 
可 移植 性 要 求 较 高 的 场合 ， 这 个 特性 会 很 方便 。 





图 3-60 

不 同 的 stroke-dasharray 值 
及 其 效果 ; 从 左 到 右 分 别 是 : 8 
189、46 189、95 189 和 156 189 





图 3-61 
我 们 的 SVG 图 形 ? 了 终于 开始 接近 
人 饼 图 的 样子 了 





3-62 
最 终 的 SVG 饼 图 


stroke-dasharray: 6 189 ; 


OW 


其 结果 就 是 图 3-60 中 的 第 一 个 图 形 。 我 们 可 以 看 到 ， 它 完全 去 除了 摘 
边 效果 ， 只 剩 下 绿色 的 圆 形 。 不 过 ， 当 我 们 开始 增加 第 一 个 值 时 ， 好 玩 的 事 
情 就 开始 了 参见 图 3-60) : 因为 虚线 的 间 际 太 大 ， 我 们 根本 就 看 不 到 连续 
的 虚线 效 末 ， 只 能 得 到 虚线 的 第 一 段 线 段 ， 而 它 在 整个 圆周 上 履 关 的 长 度 正 
征 我 们 给 它 指定 的 长 度 值 。 


你 可 能 已 经 开始 思考 下 一 步 该 怎么 办 了 : 如 果 我 们 把 这 个 圆 形 的 半径 减 
小 到 一 定 程度 ， 它 就 会 被 描 边 完全 覆盖 ， 而 我 们 最 终 会 得 到 一 个 非常 接近 饼 
图 的 图 形 。 举 例 来 说 ， 当 我 们 把 圆 形 的 半径 设 为 25 并 且 把 stroke-width 
指定 为 586 时 ， 所 需要 的 代码 如 下 所 示 〈 你 可 以 在 图 3-61 看 到 这 段 代 码 的 效 
果 ) : 








<svg width="166”height="166"> 
<Circle rs"25 CXx=50 Cy= 50 /> 
</Svg> 


circle { 

fill: yellowgreen; 

stroke: #655; 

stroke-width: 56; 

stroke-dasharray: 66 158; /+* 27 x 25 = 158 */ 
} 


现在 ， 把 它 转 换 成 前 一 种 方案 所 呈现 的 那 种 饼 图 就 非常 简单 了 : 我 们 
只 需要 在 描 边 的 下 层 再 绘制 一 个 稍 大 些 的 圆 形 ， 人 然后 把 描 边 以 逆 时 针 方 向 
旋转 90"， 以 便 让 扇 区 的 起 点 出 现在 最 顶部 。 由 于 <svg> 元 素 本 身 也 是 一 个 
HTML 元 了 水 ， 我 们 可 以 给 它 设 置 样式 : 


svg { 
transform: rotate(-96deg ) ; 
background: yellowgreen 
border-radius: 56%; 


| 


你 可 以 在 图 3-62 中 看 到 最 终 效果 。 这 个 技巧 还 可 以 让 饼 图 从 。 到 











J 请 记 住 : SVG 在 绘制 描 边 时 总 是 会 把 一 半 绘 制 在 元 素 外 部 ， 妨 一 半 绘 制 在 元 素 内 部 。 在 未 来 ， 
我 们 将 有 能 力 控 制 这 种 行为 。 


166% 的 动画 变 得 更 加 人 简单。 我 们 只 需要 新 建 一 个 CSS 动画 ， 并 把 stroke- 
dasharray 属性 从 8 158 变化 到 158 158 就 可 以 了 : 


@keyframes fillup { 
to { stroke-dasharray: 158 158; } 


} 
circle { 

fill: yellowgreen; 

stroke: #655; 

stroke-width: 50; 

stroke-dasharray: 8 158 ; 

animation: fillup 5s linear infinite; 
} 





接 下 来 继续 优化 ， 我 们 可 以 给 这 个 圆 形 指定 一 个 特定 的 半径 ， 从 而 让 
它 的 周 长 无 限 接近 100， 这 样 束 可 以 直接 把 比率 的 百分比 值 指定 为 stroke- 
dasharray 的 长 度 ， 不 需要 做 任何 计算 了 。 因 为 周 长 是 2rr， 半 径 就 是 
3 ~15.915 494 309 ， 我 们 最 终 把 这 个 值 取 整 为 16。 我 们 还 可 以 在 SVG 的 
viewBox 属性 中 指定 其 尺寸 ， 而 不 再 使 用 width 和 height 属性 ， 这 样 就 可 
以 让 它 自动 适应 容器 的 大 小 了 。 

在 完成 这 些 改进 之 后 ， 我 们 再 来 试 试 生成 图 3-62 中 的 饼 图 。 结 构 代 码 


将 是 这 样 的 : 











<SVg ViewBox="0 0 32 32"> 
<circle r="16" cx="16" cy="16" /> 
</Svg> 


而 CSS 代码 会 变 成 这 样 : 


svg { 
width: 106px; height: 168px; 
transform: rotate(-906deg); 
background: yellowgreen; 
border-radius: 56%; 


) 
circle { 

fill: yellowgreen; 

stroke: #655; 

stroke-width: 32; 

stroke-dasharray: 38 166; /* 可 得 到 比率 为 38% 的 局 区 */ 
y 


来 感受 一 下 ， 现 在 改变 饼 图 比率 是 多 么 轻松 自然 啊 。 不 过 ， 在 经 过 了 
这 些 和 俐 化 之 后 ， 我 们 还 是 不 希望 每 画 一 个 饼 图 都 要 重复 编写 一 次 SVG 标签 。 
这 个 时 候 就 轮 到 JavaScript 大 显 身 手 了 ， 它 能 把 这 个 过 程 日 动 化 。 我 们 需要 
写 一 小 段 脚 本 来 处 理 类 似 下 面 这 段 人 简单 的 HTML 结构 : 


<div class="pie">26%</div> 
<div class="pie">66%</div> 


然后 在 每 个 .pie 元 素 内 部 生成 一 个 SVG 图 像 ， 并 添 和 人 所 有 必要 的 图 形 
元 件 和 属性 。 为 确保 可 访问 性 ， 还 可 以 在 它 内 部 增加 一 个 <title> 元 素 ， 这 
样 屏 大 阅 旋 希 的 谈 者 也 可 以 知道 这 个 图 像 显 示 的 是 什么 比率 了 。 这 段 脚本 最 
终 可 能 是 这 样 的 : 


$$('.pie').forEach(function(pie) { 
var p = parseFloat(pie.textContent); 
var NS = "http://www.w3.org/26000/svg"; 
Var svg = document.createElementNS(NS, "svg"); 
Var circle = document.createElementNS(NS, "circle"); 
var title = document.createElementNS(NS, "title"); 
circle.setAttribute("r", 16); 
circle.setAttribute("cx", 16); 
circle.setAttribute("cy", 16); 
circle.setAttribute("stroke-dasharray", p + ” 1606"); 
svg.setAttribute("viewBox", "0 6 32 32"); 
title.textContent = pie.textContent; 
pie.textContent = "'; 
svg.appendChild(title); 
svg.appendChild(circle); 
pie.appendChild(svg ) ; 

ps 


关于 未 来 有 2 


还 记得 “棋盘 ”一 节 中 提 到 的 角 辐 渐变 吗 ? 它 在 这 里 也 是 大 有 用 武之 地 的 。 
我 们 在 生成 饼 图 时 只 需要 一 个 圆 形 元 素 ， 骨 配 上 一 幅 具 有 两 个 色 标 的 角 同 
渐变 即 可 。 举 例 来 说 ， 图 3-53 所 呈现 的 40% 人 饼 图 可 能 就 是 这 么 人 简单: 


: 10606px; height: 1606px; 
: 50%; 
: Conic-gradient(#655 46%, yellowgreen 0); 
) 


不 仅 如 此 ， 一 旦 attr() 函数 在 CSS 值 人 ( http://w3.org/TR/css3-values/#attr-notation ) 中 的 扩 


展 定义 得 到 广泛 实现 之 后 ， 你 将 可 以 通过 一 个 简单 的 HTML 标签 属性 来 控制 饼 图 的 比率 显示 。 
: Conic-gradient(#655 attr(data-value %), yellowgreen 6) ; 


有 了 这 件 利器 ， 在 饼 图 中 加 入 第 三 种 颜色 也 会 变 得 于 到 擒 来 。 举 个 例子 ， 如 果 要 生成 本 段 右 上 方 的 那个 饼 
图 ， 我 们 只 需要 再 增加 两 个 色 标 就 可 以 了 : 


: Conic-gradient(deeppink 28%, #fb3 60, #fb3 36%, yellowgreen 6) 





这 样 就 可 以 了 ! 你 可 能 会 琢磨 前 面 的 CSS 方案 是 不 是 更 好 一 些 ， 因 为 
它 的 代码 看 起 来 更 简单 ， 而 且 你 也 更 熟悉 。 但 实际 上 SVG 的 方案 具有 不 少 
优点 ， 而 这 恰恰 是 纯 CSS 方案 存在 不 足 的 地 方 。 


加 增加 第 三 种 颜色 是 非常 容易 的 : 只 要 增加 另 一 个 圆 形 ， 并 设置 虚线 
朱 边 ， 再 用 stroke-dashoffset 来 推 后 摘 边 线段 的 起 始 位 置 即 可 。 
把 它 的 描 边 长 度 添加 到 它 下 面 那 层 描 边 的 长 度 ， 也 可 以 做 到 。 在 前 
一 种 方案 中 ， 我 们 该 怎么 给 饼 图 增加 第 三 种 颜色 呢 ? 

加 我 们 不 需要 特别 担心 打印 ， 因 为 SVG 元 素 本 身 被 视 为 页 面 内 容 ， 是 
会 被 打印 出 来 的 ， 在 这 方面 它 跟 <img> 元 素 类 似 。 前 面 的 方案 则 依 
束 背 景 来 实现 ， 因 此 往往 是 打印 不 出 来 的 。 

加 我 们 可 以 用 内 联 样式 来 指定 颜色 ， 这 意味 着 可 以 很 容易 地 通过 脚本 
来 控制 颜色 《〈 比 如 ， 我 们 想 让 用 户 输 入 来 决定 颜色 )。 前 一 种 方案 则 
依赖 伪 元 素 ， 我 们 无 法 对 它 使 用 内 联 样式 ; 即使 可 以 通过 继承 来 变 
通 实现 ， 也 往往 很 不 方便 。 


play.csssecrets.io/pie-sVv8g 


四 CSS 变形 
http://w3.org/TR/css-transforms 相关 规范 


辐 CSS 图 像 
http://w3.0org/TR/css-images 





是 CSS Eee pi 
http://w3.0org/TR/css-backgrounds 


加 可 缩放 矢量 图 形 (SVG) 
http://w3.0rg/TR/SVG 


CSS 图 像 (第 四 版 》 


http://w3.0org/TR/css4-1mages 





14 简单 的 饼 图 5 











单 侧 投影 





难 匮 


在 问答 网 站 上 ， 最 常 被 问 到 的 box-shadow 问题 ， 就 是 如 何 只 在 元 素 的 
一 侧 〈 偶 尔 是 两 侧 ) 设置 投影 。 在 stackoverflow.com 上 进行 快速 搜索 ， 就 
可 以 搜 到 近 千 个 此 类 问题 。 这 种 现象 不 无 道理 ， 因 为 只 在 单 侧 显示 投影 可 以 
创建 一 种 优雅 而 又 真实 的 效果 。 有 时 ， 走 投 无 路 的 开发 者 甚至 会 写 信 给 CSS 
工作 组 的 邮件 列表 ， 要 求 增 加 类 似 box-shadow-bottom 这 样 的 属性 来 实现 
这 个 需求 。 其 实 ， 利 用 我 们 再 熟悉 不 过 的 box-shadow 属性 ， 再 加 上 一 点 创 
意 ， 就 可 以 完美 地 实现 这 个 效果 。 


单 侧 投影 


大 多 数 人 使 用 box-shadow 的 方法 是 ， 指 定 三 个 长 度 值 和 一 个 闫 色 值 : 




















box-shadow: 2px 3px 4px rgba(6,86,0,.5); 


接 下 来 的 几 个 步 又 很 好 地 《虽然 在 技术 上 还 不 够 严谨 ) 以 图 形 化 的 方式 
讲解 了 投影 是 如 何 绘制 的 〈 参 见 图 4-1)。 


(1) 以 该 元 素 相同 的 尺寸 和 位 置 ， 画 一 个 rgba(8,6,6, .5) 的 矩形 。 

(2) 把 它 向 右 移 2px， 向 下 移 3px。 

(3) 使 用 高 斯 模糊 算法 (或 类 似 算 法 ) 将 它 进行 4px 的 模糊 处 理 。 这 在 
本 质 上 表示 在 阴影 边缘 发 生 阴 影 色 和 纯 透 明 色 之 间 的 颜色 过 渡 长 度 近似 于 模 
糊 半 径 的 两 倍 〈 比 如 在 这 里 是 8px)。 

(4) 接 下 来 ， 模 糊 后 的 矩形 与 原始 元 素 的 交集 部 分 会 被 切除 掉 ， 因 此 它 
看 起 来 像 是 在 该 元 素 的 “后 面 "。 这 跟 大 多 数 开发 者 所 理解 的 情况 元素 释 




















QD 除非 特别 注 明 ， 元 素 的 尺寸 表示 它 的 border box 的 尺寸 ， 而 不 是 它 的 CSS 宽度 和 高 度 。 


4-1 
box-shadow 的 绘制 原理 








在 模糊 后 矩形 的 上 层 ) 可 能 稍 有 不 同 。 不 过 ， 在 某 些 场景 下 ， 意 识 到 没有 任 
何 投影 绘制 在 元 素 的 下 层 十 分 重要 。 人 举例 来 讽 ， 如 条 给 元 素 设置 一 层 半 透 
明 的 背景 ， 我 们 就 看 不 到 它 下 层 有 任何 投影 。 这 一 点 跟 text-shadow 不 同 ， 
为 文子 下 层 的 投影 不 会 被 裁 切 。 

使 用 4px 的 模糊 半径 意味 看 投影 的 信 寸 会 比 元 系 本 号 的 尺寸 大 约 8px， 
因此 投影 的 最 外 圈 会 从 元 素 的 四 面向 外 显露 出 来 ”"。 我 们 只 需 改 变 偏 移 量 ， 
就 可 以 把 投影 的 项 部 和 左 侧 隐藏 起 来 ， 只 要 这 两 个 方 回 上 的 仿 移 量 不 小 于 
4px 就 可 以 了 。 但 是 ， 这 在 某 种 程度 上 会 导致 外 露 的 投影 太 过 浓重 ， 看 起 来 
不 是 很 美观 〈 人 参见 图 4-2)。 为 外 ， 就 拭 这 个 问题 勉强 可 以 接受 ， 我 们 想 要 
的 投影 也 只 能 出 现在 单 侧 《而 不 是 相 邻 的 两 侧 )， 还 记得 吗 ? 




















4-2 
试图 使 用 与 模糊 半径 相等 的 偏 移 最 终 的 解决 方案 来 自 box-shadow 鲜 为 人 知 的 第 四 个 长 度 参 数 。 它 排 在 
量 来 隐藏 项 部 和 左 侧 的 投影 模糊 半径 参数 之 后 ， 称 作 扩 张 半径 。 这 个 参数 会 根据 你 指定 的 值 去 扩大 或 





〈 当 指定 负 值 时 ) 缩小 投影 的 尺寸 。 举 例 来 说 ， 一 个 -5px 的 扩张 半径 会 把 投 


影 的 守 度 和 高 度 各 减少 19px《〈 即 每 边 各 5px)。 


从 逻辑 上 来 说 ， 如 采 我 们 应 用 一 个 负 的 扩张 半径 ， 而 它 的 值 刚 好 等 于 模 
糊 半径 ， 那 么 投影 的 太 二 就 会 与 投影 所 属 元 系 的 矿 才 完全 一 致 。 除 非 用 偶 移 
量 〈 前 两 个 长 度 参数 ) 来 移动 它 ， 我 们 将 完全 看 不 见 任 何 投影 。 因 此 ， 如 果 
给 投影 应 用 一 个 正 的 垂 生 侦 移 量 ， 我 们 台 会 在 元 系 的 左 部 看 到 一 道 投 影 ， 而 
元 系 的 另外 三 侧 是 没有 投影 的 ， 这 正 是 我 们 一 二 吉 吉 人 奶 寻 的 效 采 : 


























4-3 box-shadow: 6 5px 4px -4px black ; 


只 有 底 边 有 box-shadow 


你 可 以 在 图 4-3 中 看 到 最 终 效 果 。 


7 7 play.csssecrets.io/shadow-one-side 





为 一 个 经 第 被 问 到 的 问题 是 ， 如 何在 元 素 的 两 条 边 上 设置 投影 。 如 来 这 
两 条 边 是 相 邻 的 《比如 右 侧 和 底部 )， 就 比较 容易 一 些 ， 要 么 满足 于 图 4-2 
文 样 上 








加 我 们 不 应 该 把 投影 缚 得 太 小 ， 而 是 只 需 把 阴影 藏 进 一 侧 ， 邦 一 侧目 
然 露 出 就 好 。 因 此 ， 扩 张 半径 不 应 设 为 模糊 半径 的 相反 值 ， 而 应 该 
4-4 是 这 个 相反 值 的 一 半 。 











只 在 两 条 邻 边 有 box-shadow 可 需要 指定 两 个 俩 移 量 ， 因 为 我 们 布 望 投影 在 水 平和 垂直 方 向 上 同时 


J 确切 地 说 ， 我 们 将 在 项 部 看 到 1px 的 投影 〈4px-3px)、 在 左 侧 看 到 2px (4px-2px)、 在 右 侧 
看 到 6px〈4px+2px)、 在 底部 看 到 7px〈(4px+3px)。 在 实践 中 ， 投 影 看 起 来 会 比 这 些 值 稍 小 ， 
为 投影 的 颜色 在 边 绿 处 的 过 渡 不 是 线性 的 ， 这 跟 渐 变 不 一 样 。 





移动 。 它 们 的 值 需 要 大 于 或 等 于 模糊 半径 的 一 半 ， 因 为 我 们 希望 把 
投影 藏 进 男 外 两 条 边 之 内 。 
举例 来 说 ， 把 一 个 国 black、6px 的 投影 设置 到 右 侧 和 底部 可 以 这 
样 做 : 


box-shadow: 3px 3px 6px -3px black; 


你 可 以 在 图 4-4 中 看 到 最 终 效 果 。 
play.csssecrets.io/shadow-2-sides 


双 侧 投影 


当 我 们 想 把 投影 设置 在 元 素 的 两 条 对 边 《〈 比 如 左 侧 和 右 侧 ) 时 ， 事 情 就 
变 得 严 手 了 。 因 为 扩张 半径 在 四 个 方向 上 的 作用 是 均等 的 (也 就 是 说 ， 我 们 
无 法 指定 投影 在 水 平方 向 上 放大 , 而 在 垂直 方向 上 缩小 )“, 唯一 的 办 法 是 用 
两 块 投影 (每 边 各 一 块 ) 来 达到 目的 。 然 后 基本 上 就 是 把 “ 单 侧 投 影 ” 中 的 
拉 巧 运用 两 次 : 








4-5 
-5px 8 5px -5px black; 只 在 两 条 对 边 有 box-shadow 


box-shadow: 5px 8 5px -5px black, 


你 可 以 在 图 4-5 中 看 到 最 终 效 末 。 


play.csssecrets.io/shadow-opposite-sides 


国 CSS 背景 与 边框 让 
人 相关 规范 
http://w3.o0org/TR/css-backgrounds 





J CSS 工作 组 内 部 也 在 讨论 未 来 是 否 允 许 分 开 指定 水 平和 垂直 方向 上 的 扩张 半径 ， 这 个 特性 将 
会 大 大 简化 本 段 的 难题 。 








图 4-6 

通过 CSS 美化 过 的 元 素 无 法 完美 
地 泻 染 box-shadow， 中 box- 
shadow 的 值 为 2px 2px 16px 
rgba(6,0,0,.5) 


和 全 握 = 二 
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box-shadow 





难题 
当 我 们 想 给 一 个 矩形 或 其 他 能 用 border-radius 生成 的 形状 (在 “ 自 
适应 的 椭圆 ”一 市 中 可 以 看 到 一 些 示 例 ) 加 投影 时 ，box-shadow 的 表现 都 
堪 称 完美 。 但 是 ， 当 元 条 添加 了 一 些 伪 元 系 或 半 透 明 的 装饰 之 后 ， 它 就 有 些 
力不从心 了 ， 因 为 border-radius 会 无 耻 地 忽视 透明 部 分 。 这 类 情况 包括 : 
国 半 透 明 图 像 、 背 景 图 像 、 或 者 border-image〈 比 如 老式 的 金 质 像框 ) ; 
加 元 系 设 置 了 点 状 、 虚 线 或 半 透 明 的 边框 ， 但 没有 背景 〈 或 者 当 
background-clip 不 是 border-box 时 ) ; 
对 话 气 泡 ， 它 的 小 尾巴 通常 是 用 伪 元 系 生 成 的 ; 
我 们 在 “ 切 角 效果 ”一 市 中 见 过 的 切 角 形状 ; 
几乎 所 有 的 折 角 效果 ， 包 括 “ 折 角 效 果 ” 一 节 将 提 到 的 例子 ; 
通过 clip-path 生成 的 形状 ， 比 如 “ 鞭 形 图 片 ” 一 下 中 提 到 的 秦 形 
图 像 。 
如 果 我 们 打算 对 这 类 元 素 直 接应 用 box-shadow， 那 只 能 得 到 图 4-6 这 
样 的 结果 。 难 道 我 们 只 能 完全 放弃 投影 效果 吗 ? 有 没有 办 法 可 以 解决 这 个 
难题 ? 




















Dotted 
border 





解决 方案 


滤 镜 效果 规范 (http://w3.org/TR/filter-effects〉 为 这 个 问题 提供 了 一 个 解 
决 方案 。 它 引入 了 一 个 叫 作 filter 的 新 属性 ， 这 个 属性 也 是 从 SVG 那里 借 
鉴 过 来 的 。 尽 管 CSS 滤 镜 基本 上 就 是 SVG 滤 镜 ， 但 我 们 并 不 需要 掌握 任何 
SVG 知识 。 相 反 ， 只 需要 一 些 函 数 就 可 以 很 方便 地 指定 滤 镜 效 末 了 ， 比 如 
blur()、grayscale() 以 及 我 们 需要 的 drop-shadow() ! 如 果 你 喜欢 ， 甚 
至 可 以 把 多 个 滤 镜 串 连 起 来 ， 只 要 用 空格 把 它们 分 隔 开 就 可 以 了 ， 比 如 : 





filter: blur() grayscale() drop-shadow( ) ; 


drop-shadow() 滤 镜 可 接受 的 参数 基本 上 跟 box-shadow 属性 是 一 样 
的 ， 但 不 包括 扩张 半径 ， 不 包括 inset 关键 字 ， 也 不 支持 去 号 分 割 的 多 层 投 
影 语法 。 举 个 例子 ， 上 面 的 投影 : 


box-shadow: 2px 2px 16px rgba(6,86,9,.5); 
可 以 这 样 来 写 : 
filter: drop-shadow(2px 2px 16px rgba(6,6,9,.5)); 


在 图 4-7 中 ， 你 可 以 看 这 个 drop-shadow() 滤 镜 应 用 到 图 4-6 中 那些 
元 素 上 的 效果 。 





LLLLLLE 
名 已 
> Dotted 2 
蚤 天 
了 border 
昌 电 





CSS 滤 镜 最 大 的 好 处 在 于 ， 它 们 可 以 平稳 退化 : 当 浏 览 器 不 支持 时 ， 不 
会 出 现 问题 ， 只 不 过 没有 任何 效果 而 已 。 如 果 你 确实 需要 这 个 效果 在 尽 可 
能 多 的 浏览 硕 中 显示 出 来 ， 可 以 同时 附 上 一 个 SVG 滤 镜 ， 这 样 可 以 得 到 稍 
微 好 一 些 的 浏览 器 支持 度 。 你 可 以 在 滤 镜 效果 规范 〈http:/www.w3.org/TR/ 
filter-effects/) 中 为 每 个 滤 镜 困 数 找到 对 应 的 SVG 滤 镜 版 本 。 你 可 以 把 SVG 
滤 镜 和 人 简化 的 CSS 滤 镜 放 在 一 起 使 用 ， 让 层 肘 机制 来 决定 哪 一 行 最 终生 效 : 


filter: url(drop-shadow.svg#drop-shadow); 
filter: drop-shadow(2px 2px 16px rgba(6,6,9,.5)); 


不 洱 的 是 ， 如 琳 SVG 滤 镜 是 存放 在 一 个 独立 文件 里 的 ， 那 它 就 无 法 像 一 
个 徊 洁 易 用 的 函数 那样 在 CSS 代码 中 进行 随意 配置 ， 如果 它 是 内 联 的 ， 则 又 会 





不 完全 支持 





@ 这 两 个 属性 所 用 的 模糊 算法 
可 能 不 同 ， 因 此 你 可 能 需要 调整 
模糊 参数 ， 

4-7 
drop-shadow() 滤 镜 应 用 到 图 4-6 
中 那些 元 素 上 的 效果 
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图 4-8 


text-shadow 也 会 从 drop-shadow() 
滤 镜 那里 得 到 一 层 


几时 
又 习 Z 


搅乱 你 的 代码 。 参 数 需 要 写 死 在 文件 内 部 ， 因 此 每 当 我 们 新 加 一 种 哪怕 是 大 同 
小 异 的 投影 效果 时 ， 都 需要 多 准备 一 个 文件 ， 这 显然 是 难以 接受 的 。 当 然 ， 我 
们 还 可 以 使 用 data URI〔 它 也 会 省 掉 额 外 的 HTTP 请 求 )， 但 这 个 方法 仍然 会 带 
来 文件 体积 的 增长 。 总 的 来 说 ， 这 个 方法 只 是 一 种 回 退 方案 ， 因 此 只 要 我 们 把 
SVG 滤 镜 控制 在 一 定数 量 以 内 ， 哪 怕 它 们 的 效果 大 同 小 异 ， 也 是 说 得 过 去 的 。 

另外 一 件 需要 牢记 的 事情 就 是 ， 任 何 非 透明 的 部 分 都 会 被 一 视 同 仁 地 
打上 投影 ， 包 括 文本 《如果 背 景 是 透明 的 )， 正 如 我 们 刚刚 在 图 4-7 中 看 到 
的 那样 。 你 可 能 会 想 ， 是 不 是 可 以 通过 text-shadow: none; 来 取消 邱 文 
本 上 的 投影 呢 ? 其 实 text-shadow 跟 它 是 完全 不 相干 的 两 码 事 ， 因 此 这 样 
做 并 不 能 取消 文本 上 的 drop-shadow() 效果 。 上 此外， 如果 你 已 经 用 text- 
shadow 在 文本 上 加 了 投影 效果 ， 文 本 投影 还 会 被 drop-shadow() 滤 镜 再 加 
上 投影 ， 这 本 质 上 是 给 投影 打 了 投影 ! 看 看 下 面 这 段 示 例 代 码 (请 原谅 它 惨 
不 丸 睹 的 效果 ， 这 样 只 是 为 了 凸显 这 个 怪异 的 问题 ) : 














color: deeppink; 

border: 2px solid; 

text-shadow: .lem .2em yellow; 

filter: drop-shadow(.65em .65em .1em gray); 


你 可 以 在 图 4-8 中 看 到 它 的 泻 染 效果 ， 图 中 的 文学 被 同时 打上 了 text- 
shadow 和 drop-shadow()。 


eh 


四 滤 镜 效果 + 
ee 相关 规范 
http:/w3.ore/ 工 Ralter-eftects 





染色 效 采 





HSL 色彩 模型 ，background-size 





难题 


为 一 幅 灰 度 图 厂 (或 是 被 转换 为 灰 度 模式 的 彩色 图 片 ) 增加 染色 效果 
(color tint)， 是 一 种 流行 且 优 雅 的 方式 ， 可 以 给 一 系列 风格 迎 异 的 照 斤 市 来 
视 党 上 的 一 致 性 。 我 们 通 稼 会 在 静止 状态 下 应 用 这 个 效果 ， 当 发 生 :hover 
或 其 他 交互 时 再 去 除 。 


一 直 以 来 ， 我 们 需要 使 用 图 像 处 理 软件 来 生成 图 片 的 两 个 版 本 ， 然 后 
再 写 一 些 简 单 的 CSS 代码 来 处 理 这 两 个 版 本 的 交 督 显现。 这 个 方法 行 得 通 ， 
但 它 会 导致 更 大 的 文件 体积 和 额外 的 HTTP 请求， 而 且 在 可 维护 性 方面 也 是 
一 场 踊 梦 。 想 像 一 下 ， 一 旦 我 们 决定 改变 这 个 效果 的 主 色 调 ， 就 不 得 不 处 理 
所 有 的 图 片 ， 为 它们 重新 制作 全 爸 的 音色 版 本 ! 














@stubbornella @patrickhamann 
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CSSConf 2014 官网 为 讲师 照片 
使 用 了 这 个 效果 ， 当 鼠标 悬 停 或 
获得 焦点 时 ， 照 片 将 显示 为 全 彩 
的 样式 


17 染色 效果 





图 4-10 
原始 图 片 (上 图 ) 和 添加 了 
sepia() 滤 镜 之 后 的 图 片 ( 下 图 ) 





4-11 
图 片 又 添加 了 saturate() 滤 镜 


另外 一 种 方法 是 : 在 图 乒 的 上 层 履 闹 一 层 半 透 明 的 纯色 :或 者 把 图 片 设 
置 为 半 透 明 并 罗 盖 在 一 层 实 色 背景 之 上 。 但 这 其 实 并 不 是 真正 的 染色 效果 : 
不 仅 没 有 把 图 片 中 的 各 种 颜色 转换 为 目标 色调 ， 同 时 也 极 大 地 削弱 了 图 片 的 
对 比 度 。 


此 外 还 有 基于 JavaScript 的 方案 ， 把 图 片 置 入 <canvas> 元 素 中 ， 并 利 
用 脚本 对 其 进行 染色 处 理 。 这 确实 可 以 得 到 真实 的 染色 效果 ， 但 性 能 不 佳 ， 
而 且 限 制 很 多 。 


难道 就 没有 一 种 更 简单 的 、 纯 CSS 的 方法 能 实现 图 片 染色 效果 吗 ? 


基于 小 镜 的 方案 


由 于 没有 一 种 现成 的 滤 镜 是 专门 为 这 个 效果 而 设计 的 ， 我 们 需要 人 花 一 些 
心思 》 把 多 个 滤 镜 组 合 起 来 o 


我 们 要 使 用 的 第 一 个 滤 镜 是 sepia()， 它 会 给 图 所 增加 一 种 降 饱 和 度 的 
橙 黄色 染色 效果 ， 几 乎 所 有 像素 的 色相 值 会 被 收敛 到 35$~40 (参见 图 4-10 )。 
如 果 这 种 色调 正 是 我 们 想 要 的 ， 那 就 可 以 收工 了 。 不 过 我 们 的 需求 通常 并 
非 如 此 。 如 果 我 们 想 要 的 主 色调 的 饱和 度 比 这 更 高 ， 可 以 用 saturate() 滤 
镜 来 给 每 个 像素 提升 饱和 度 。 假 设 我 们 想 要 的 主 色调 是 国 hs1(335， 166%， 
56%)， 那 就 需要 把 饱和 度 提升 一 些 ， 于 是 我 们 将 饱和 度 参 数 设 置 为 4。 具 体 
取 值 取决 于 实际 情况 ， 我 们 通常 需要 用 肉眼 来 观察 和 判断 。 如 图 4-11 所 示 ， 
这 两 个 滤 镜 的 组 合 会 让 我 们 的 图 片 具 有 一 种 暖 金 色 的 染色 效果 。 


图 片 现 在 看 起 来 很 不 错 ， 但 我 们 并 不 希望 把 图 片 调 为 这 种 检 黄 色调 ， 而 
是 稍 次 的 亮 粉色 。 因 此 ， 我 们 还 需要 再 添加 一 个 hue-rotate() 滤 镜 ， 把 每 
个 像素 的 色相 以 指定 的 度数 进行 偏 移 。 为 了 把 原 有 的 色相 值 40 改变 为 335， 
我 们 需要 增加 大 约 295 度 (335 - 40): 
































filter: sepia(1) saturate(4) hue-rotate(295deg ) ; 


此 时 ， 我 们 就 把 这 张 图 片 的 色调 改变 了 ， 效 果 如 图 4-12 所 示 。 如 果 这 
个 效果 需要 由 :hover 或 其 他 状态 来 触发 切换 ， 我 们 甚至 还 可 以 为 这 个 变化 
增加 过 渡 动 画 : 





img { 
transition: .5s filter; 
filter: sepia(1) saturate(4) hue-rotate(295deg); 


} 


img:hover, 
img:focus { 
filter: none; 


} 





play.csssecrets.io/color-tint-filter 


基于 混合 模式 的 方案 


滤 镜 方案 是 行 之 有 效 的 ， 但 你 可 能 会 注意 到 它 产生 的 结果 与 我 们 在 图 
像 处 理 软件 中 得 到 的 效果 不 完全 一 致 。 即 使 我 们 想 把 图 像 调 为 一 种 很 亮 的 颜 ”外 412 

色 ， 结 果 仍 然 会 显得 像 衫 了 色 一 般 。 如 果 尝 试 在 saturate() 滤 镜 中 增加 人 饱 。 图 上 又 过 0 了 hue -rotate() 注 宰 
和 度 ， 又 会 得 到 一 种 不 自然 的 、 过 度 风格 化 的 效果 。 不 过 ， 幸 好 我 们 还 有 另 
-种 更 好 的 实现 方法 一 一 混合 模式 ! 


如 条 用 过 Adobe Photoshop 这 样 的 图 像 处 理 软件 ， 那 你 可 能 已 经 对 混合 
模式 相当 束 悉 了 了 。 当 两 个 元 系 琶 加 时 ,“ 混 合 模式 ”控制 了 上 层 元 素 的 颜色 
与 下 层 颜 色 进 行 混合 的 方式 。 用 它 来 实现 染色 效 末 时 ， 需 要 用 到 的 混合 模式 。 不 完全 支持 
是 luminosity。 这 种 luminosity 混合 模式 会 保留 上 层 元 素 的 HSL 亮度 信 
息 ， 并 从 它 的 下 层 吸 取 色 相 和 饱和 度 信息 。 如 果 在 下 层 准 备 好 我 们 想 要 的 主 
色调 ， 并 把 竺 处 理 的 图 片 放 在 上 层 并 设置 为 这 种 混合 模式 ， 那 本 质 上 不 就 是 
在 做 染色 人 处理 吗 ? 
要 对 一 个 元 又 设置 混合 模式 ， 有 两 个 属性 可 以 派 上 用 场 : mix-blend- 
mode 可 以 为 整个 元 系 设 置 混 合 模式 ，background-blend-mode 可 以 为 每 层 
痛 景 单独 指定 混合 模式 。 这 章 味 看 ， 如 果 用 这 个 方 采 来 处 理 图 片 ， 我 们 实际 
上 有 两 种 选择 。 不 过 这 两 者 各 有 所 短 。 
蛋 第 一 种 选择 : 需要 把 网 片 包 右 在 一 个 容 硕 中 ， 并 把 容 硕 的 背景 色 设 
置 为 我 们 想 要 的 主 色调 。 

加 第 二 种 选择 : 不 用 图 片 元 素 ， 而 是 用 <div> 元 素 一 一 把 这 个 元 素 的 
第 一 层 背 景 设置 为 要 染色 的 图 片 ， 并 把 第 二 层 的 背景 设置 为 我 们 想 
要 的 主 色调 。 

针对 不 同 的 场景 ， 可 以 选择 这 两 者 的 其 中 之 一 。 举 个 例子 ， 如 采 我 们 硕 ”图 4-13 
望 对 一 个 <img> 元 系 应 用 这 个 效果 ， 就 需要 把 它 包 含 在 另 一 个 元 素 内 部 。 不 ”比较 一 下 滤 镜 产生 的 效果 ( 上 图 ) 
过 如 采 我 们 已 经 有 了 这 一 层 容 此， 比如 <a>， 那 就 水 到 渠 成 了 : 和 竟 合 模式 产生 的 效果 ( 下 图 ) 
















































































<a href="#something"> 
<img src="tiger.jpg" alt="Rawrrr!" /> 
</a> 





然后 ， 只 需要 两 行 声明 就 可 以 实现 这 个 效 来 : 


al 
background: hs1(335，166%，562% ) ; 
} 
img { 
mix-blend-mode: luminosity; 
上 





和 CSS 滤 镜 类 做 ， 混 合 模式 可 以 平稳 退化 : 如 采 不 被 文 持 ， 效 末 只 是 
不 出 现 而 已 ， 图 片 本 里 还 是 完好 可 见 的 。 

有 一 件 事 情 需要 注意 ， 滤 镜 是 可 动画 的 ， 而 混合 模式 则 不 是 。 我 们 在 上 
面 已 经 见识 过 了 ， 一 张 图 片 只 需要 在 filter 属性 上 设置 好 CSS 过 渡 之 后 就 
可 以 从 全 彩 样式 慢 慢 淡化 为 单 色 样式 ， 但 你 无 法 对 混合 模式 做 同样 的 事情 。 
不 过 也 别 着 急 ， 这 并 不 表示 过 小 动画 是 完全 不 可 能 的 ， 只 是 意味 春 我 们 需要 
跳出 框框 来 重新 思考 。 


如 上 面 所 解释 的 那样 ，mix-blend-mode 是 把 整个 元 素 向 下 进行 混合 ， 
而 不 管 它 的 下 层 是 什么 。 因 此 ， 如 果 我 们 把 这 个 属性 设置 为 luminosity 混 
合 檬 式 ， 那 图 片 就 总 是 会 跟 某 些 东 西 进行 混合 。 此 外 ， 使 用 background- 
blend-mode 属性 则 可 以 让 每 层 背 景 跟 它 的 下 层 背 景 进行 混合 ， 但 并 不 关心 
元 系 之 外 是 什么 情况 。 男 外 ， 当 我 们 只 有 一 个 背景 图 像 以 及 一 个 透明 背景 
时 ， 会 发 生 什么 ?你 猿 对 了 : 不 会 出 现任 何 混合 效果 ! 

好 的 ， 接 下 来 我 们 将 利用 上 述 分 析 结 果 ， 采 用 background-blend- 
mode 属性 来 达成 我 们 想 要 的 效果 。 在 此 之 前 ，HTML 代码 需要 稍 作 调整 : 


























<div class="tinted-image" 
style="background-image:url(tiger.jpg)"> 
</div> 





这 样 一 来 ， 我 们 就 只 需要 对 一 个 <div> 元 素 设 置 CSS 了， 因为 这 个 技 
巧 并 不 需要 其 他 额外 的 元 素 : 


.tinted-image { 
width: 646px; height: 446px; 
background-size: Cover; 
background-color: hsl(335, 166%, 506%); 
background-blend-mode: luminosity; 
transition: .5s background-color ; 


l 


.tinted-image:hover { 
background-color: transparent ; 


} 


不 过 ， 就 像 前 面 提 到 的 那样 ， 这 两 种 方法 都 不 够 理想 。 它 们 的 主要 问题 
在 于 : 

加 图 片 的 尺寸 需要 在 CSS 代码 中 写 死 ; 

国 在 语义 上 ， 这 个 元 素 并 不 是 一 张 图 片 ， 因 此 并 不 会 被 读 屏 需 之 类 的 

设备 该 出 来 。 

生活 就 是 这 样 ， 没 有 十 全 十 美 。 在 这 一 节 中 ， 我 们 收获 了 三 种 实现 染色 
效果 的 方法 ， 每 种 方法 都 各 有 优 缺 点 。 到 底 选 择 哪 种 方法 ， 还 是 要 看 项 目的 
具体 需求 。 























play.csssecrets.io/color-tint 


向 Dudley Storey (http://demosthenes.info〉 脱 由 致 效 ， 感 谢 他 提出 了 混 
合 模 式 的 动画 技巧 (http://demosthenes.info/blog/888/Create-Monochromatic- 
Color-Tinted-Images-With-CSS-blend ) 。 





滤 镜 效果 
http://w3.org/TR/filter-effects 


图 像 混合 效果 


http://w3.o0rg/TR/compositing 


CSS 过 渡 
http://w3.org/TR/css-transitions 





毛 玻 璃 效果 





RGBA/HSLA 颜色 





难题 


半 透 明 颜 色 最 初 的 使 用 场景 之 一 就 是 作为 背景 。 将 其 从 放 在 照片 类 或 其 
他 花哨 的 背 层 "之 上 ， 可 以 减少 对 比 度 , 确保 文本 的 可 读 性 。 这 种 效果 确实 很 
有 视觉 冲击 力 ， 但 仍然 可 能 导致 文字 很 难 阅读 ， 特 别 是 当 不 透明 度 较 低 或 背 
层 图 案 太 过 花哨 时 。 举 个 例子 ， 我 们 来 看 看 图 4-14， 图 中 main 元 素 的 背景 





J 我 们 在 这 里 用 了 “ 背 层 ”(backdrop) 一 词 ， 它 表示 页 面 被 某 个 上 层 元 素 遮 住 的 部 分 ， 这 部 分 
区 域 透 过 该 上 层 元 系 的 半 透 明 背 景 显现 出 来 。 
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是 半 透 明 的 白色 。 结 构 大 致 是 这 样 的 : 


<main> 
<blockquote> 
"The only way to get rid of a temptation[...]" 
<footer>— 
<cite> 
Oscar Wilde, 
The Picture of Dorian Gray 
</cite> 
</footer> 
</blockquote> 
</main> 


CSS 代码 可 能 是 这 样 的 〈 简 短 起 见 ， 这 里 只 列 出 了 关键 样式 ) : 


body { 
background: url("tiger.jpg") 6 / cover fixed; 
by 
main { 
background: hsla(8,06%,10606%, .3); 
上 





相信 你 可 以 察 党 到 ， 文 字 确 实 难以 看 清 ， 因 为 它 后面 的 图 乒 太 过 花哨 
了 ， 而 它 的 育 景色 只 有 30% 的 不 透明 度 。 当 然 ， 我 们 可 以 通过 提升 背景 


的 不 透明 度 来 增加 文本 的 可 读 性 ， 不 过 这 样 一 来 整个 效果 就 没有 那么 生动 了 
(参见 图 4-15)。 


图 4-14 
半 透明 白色 背景 使 文字 很 难 阅读 





“The only way to get rid of a temptation 1s to yield to it. 


Resist 1 and your soul grows sick wnth longing for the 
things it has forbidden to iself, waith desire for what its 


monstrous laws have made monstrous and unlawful.” 


一 Oscar Wilde, The Picture of Dorian Gray 





在 传统 的 平面 设计 中 ， 这 个 问题 的 解决 方案 通常 是 把 文本 层 所 覆盖 的 那 
部 分 图 片区 域 作 模糊 处 理 。 模 糊 的 背景 看 起 来 不 那么 花哨 ， 因 此 在 它 之 上 的 
文本 就 相对 比较 易 谈 了 。 过 去 ， 由 于 模糊 运算 的 性 能 消耗 极其 巨大 ， 以 致 于 
这 个 技巧 在 网 页 设计 和 UI 设计 中 人 鲜 有 用 武之 地 。 不 过 ， 随 着 GPU 的 不 断 进 
化 以 及 便 件 加 速 的 不 断 普 及 ， 眼 下 这 个 技巧 已 经 逐渐 流行 起 来 。 在 过 去 这 几 
年 里 ， 我 们 已 经 可 以 在 较 新 的 Microsoft Windows 系统 中 看 到 这 个 技巧 的 身 
影 ， 而 平 果 的 iOS 和 Mac OS X 操作 系统 也 不 例外 《参见 图 4-16)。 











What can | help 
you With? 


eaevorou - 


me 
局 Github 





借助 blur() 滤 镜 ， 我 们 在 CSS 中 获得 了 对 元 素 进行 模糊 处 理 的 能 
我 们 在 SVG 中 很 早 就 可 以 使 用 模糊 滤 镜 了 ， 而 这 个 CSS 滤 镜 本 质 上 就 是 它 
的 硬件 加 速 对 应 版 本 。 不 过 ， 如 果 我 们 直接 在 这 个 例子 中 使 用 blur() 滤 镜 ， 
整个 元 素 都 会 被 模糊 ， 文 本 反而 变 得 更 加 无 法 阅读 了 参见 图 4-17)。 有 没 
有 某 种 方法 可 以 只 对 元 素 的 背 层 〈 即 被 该 元 素 遮 住 的 那 部 分 背景 ) 应 用 这 个 
滤 镜 呢 ? 














图 4-15 

增加 背景 色 的 alpha 值 ( 不 透明 
度 ) 可 以 改善 文本 可 读 性 的 问题 ， 
但 同时 也 让 整个 设计 变 得 无 趣 了 


图 4-16 

过 去 几 年 间 ， 由 于 模糊 处 理 的 资 
源 消耗 已 经 不 再 像 以 前 那么 高 不 
可 攀 ， 由 模糊 背 层 所 构成 的 半 
透明 UI 已 经 变 得 越 来 越 常见 了 
( 左 图 是 Apple iOS 8.1， 右 图 是 
Apple OS X Yosemite ) 


图 4-17 
对 这 个 元 素 应 用 blur() 滤 镜 反 
而 会 把 事情 搞 砸 





解决 方案 


假设 大 背景 的 background-attachment 值 是 fixed， 这 种 情况 是 有 可 





能 的 了 ， 只 不 过 不 太 常见 。 由 于 我 们 不 能 直接 对 元 素 本 身 进行 模糊 处 理 ， 就 
对 一 个 伪 元 素 进 行 处 理 ， 然 后 将 其 定位 到 元 素 的 下 层 ， 它 的 背景 将 会 无 缝 匹 
配 <body> 的 背景 。 


首先 ， 我 们 添加 一 个 伪 元 系 ， 将 其 绝对 定位 ， 并 把 所 有 偶 移 量 置 为 8， 
这 样 就 可 以 将 它 完 整地 和 窗 盖 到 <main> 元 素 之 上 : 


main { 
position: relative; 
A | 

} 


main::before { 
content: ''; 
position: absolute; 
top: 6; right: 6; bottom: 6; left: 8; 
background: rgba(255,6,6, .5); /* 仅 用 于 调试 */ 
} 


我 们 还 给 它 设置 了 一 层 半 透明 的 国 red 背景 ， 这 样 就 可 以 看 清楚 我 们 
做 了 什么 ， 不 然 很 难 调试 透明 的 〈 即 不 可 见 的 ) 元 系 。 在 图 4-18 中 可 以 看 
到 ， 我 们 的 伪 元 素 现 在 就 覆盖 在 内 容 元 系 之 上 。 可 以 用 z-index: -1; 来 修 
正 这 个 问题 (参见 图 4-19 )。 


人 在 使 用 负 的 z-index 来 把 一 
个 子 元 素 移动 到 它 的 父 元素 下 层 
时 ， 请 务必 小 心 ， 如 果 父 元 素 的 
上 级 元 素 有 背景 ， 则 该 子 元 素 将 ~ 
出 现在 它们 之 后 。 Q) 对 非 固 定 的 背景 来 说 也 是 有 办 法 实现 的 ， 只 不 过 更 加 麻烦 。 





4-18 
伪 元 素 现在 正 覆 六 在 文本 之 上 


4-19 
使 用 z-index: -1; 来 把 伪 元 素 移 
站 和 上 和 动 到 宿主 元 素 的 后 面 


0 





现在 该 把 半 透 明 红 色 背 景 换 掉 了 ， 换 成 跟 背 层 完全 匹配 的 背景 。 要 实现 
一 点 ， 我 们 要 么 把 <body> 的 背景 复制 过 来 ， 要 么 把 伪 元 素 的 背景 声明 合 
十 去。 我 们 现在 可 以 进行 模糊 处 理 吗 ? 来 试 试看 *: 








body, main::before { 
background: url("tiger.jpg") 8 / cover fixed; 


: relative; 
: hsla(0,06%,1006%, .3); 








Q 为 什么 不 对 main: :before 使 用 background: inherit 呢 ? 因为 伪 元 素 会 从 main (而 不 是 
body) 那里 继承 样式 ， 这 样 它 只 能 得 到 一 个 半 透 明 的 月 色 背 景 。 


main::before { 
content: ''; 
position: absolute; 
top: 68; right: 6; bottom: 68; left: ©; 
filter: blur(26px); 
b 


在 图 4-20 中 可 以 看 到 ， 这 跟 我 们 的 期 望 已 经 相当 接近 了 。 模 糊 效 来 在 
中 心 区 域 看 起 来 非 第 完美 ， 但 在 接近 边 绿 处 会 未 渐 消 退 。 这 是 因为 模糊 效果 
会 腹 减 实 色 像 系 所 能 履 盖 的 范围 ， 痢 减 的 幅度 正 古 模糊 半径 的 长 度 。 对 伪 元 





素 应 用 一 个 国 red 背景 有 助 于 我 们 看 清 事情 的 真相 (参见 图 4-21)。 











4-20 

伪 元 素 模 糊 的 方法 基本 上 成 功 了 ， 
但 模糊 效果 在 边缘 处 会 逐渐 消退 ， 
削弱 了 毛 玻璃 的 视觉 效果 





4-21 
添加 一 个 国 red 背景 有 助 于 解释 
事情 的 真相 





为 了 补偿 这 种 情况 ， 我 们 需要 让 伪 元 素 相 对 其 宿主 元 素 的 斥 寸 再 向 
外 扩大 至 少 28px〔 即 它 的 模糊 半径 )。 可 以 通过 -28px 的 外 边 距 来 达到 目 
的 ， 由 于 不 同 浏 览 可 的 标 糊 算法 可 能 存在 差 寞 ， 用 一 个 更 大 的 绝对 值 〈 比 
如 -36px) 会 更 保险 一 些 。 如 图 4-22 所 示 ， 这 个 方法 可 以 修复 边缘 模糊 消 











退 的 问题 ， 但 现在 的 情况 是 有 一 圈 模 糊 效 果 超 出 了 容 希 ， 这 让 它 看 起 来 不 像 
毛 玻璃 ， 而 更 像 是 玻璃 脏 了 。 
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我 们 修正 了 边缘 处 的 模糊 消退 情 
况 ， 但 现在 又 出 现 了 模糊 效果 超 
出 元 素 范 围 的 情况 





不 过 玛 运 的 是 ， 这 个 问题 也 很 容易 修复 : 只 要 对 main 元 素 应 用 
overflow: hidden;， 就 可 以 把 多 余 的 模糊 区 域 裁 切 掉 了 。 最 终 代 人 码 如 下 所 
示 〔( 最 终 效 果 可 以 在 图 4-23 中 看 到 ): 


body, main::before { 
background: url("tiger.jpg") 8 / cover fixed; 


} 
main { 

position: relative; 

background: hsla(6,06%,1006%, .3); 
); 


main: :before { 
content: ''; 
position: absolute; 
top: 6; right: 8; bottom: 6; left: ©; 
filter: blur(28px); 
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4-23 
最 终 得 到 的 效果 





现在 页 面 文本 的 可 读 性 比 以 前 好 多 了 ， 整 个 设计 也 优雅 多 了 。 现 在 唯一 
有 和 争议 的 问题 就 是 这 个 效 灯 的 回 退 机 制 是 否 算 得 上 平稳 退化 。 如 果 浏 览 带 不 
支持 滤 镜 ， 我 们 将 得 到 最 开始 在 图 4-14 中 所 看 到 的 结果 。 我 们 只 能 适当 增 
加 青 景色 的 不 透明 度 ， 以 便 让 回 退 样式 下 的 可 该 性 得 到 少许 提升 。 


2 


四 滤 镜 效果 -HL 
相关 规范 
http:/w3.ore/ 工 Rhlter-effects 








折 角 效果 





CSS 变形 ，CSS 渐变 ,， 切 角 效 果 ” 





难题 


把 元 系 的 一 个 角 〈 通 党 是 右上 角 或 右 下 角 〉 处 理 为 类 似 折 角 的 形状 ， 再 
配 上 或 多 或 少 的 拟 物 样式 ， 这 种 效果 已 经 成 为 一 种 非常 流行 的 朔 饰 手法 。 

目前 ， 我 们 已 经 拥有 了 一 些 实用 的 纯 CSS 实现 方案 ， 其 中 某 些 技巧 早 
在 2010 年 就 由 伪 元 际 大 师 Nicolas Gallagher (http://nicolasgallagher.com/ 
pure-css-folded-corner-effect) 发 表 了 。 这 些 方法 的 基本 原理 通常 是 在 右上 角 
增加 两 个 三 角形 : 一 个 三 角形 用 来 体现 折 页 的 形状 ， 另 一 个 白色 的 三 角形 遮 
住 元 际 的 一 角 ， 用 来 模拟 翻 折 所 产生 的 缺口 。 这 两 个 三 角形 通 稼 都 是 由 经 典 
的 边框 技巧 来 生成 的 。 














图 4-24 
css-tricks.com 网 站 的 某 个 早期 设 
计 就 在 每 个 文章 区 块 的 右上 角 采 


LE 的 
MAl?/ Se ALMANAC SNIPPETS FORUMS 


Datalists for Different Input Types 不 


I sawan HTMLS date input the other day, which had the dropdown arrow on the right which I've 
grown accustom to clicking to reveal a calendar datepicker in which to choose a date. 


CSS-TRICKS creehouse- Land your dream job. 


treehouse 


Typically, that looks like this:... 
Read Article — Leaming changes lives! 





How SVG Shape Morphing Works 


让 ~ en aac LYRA PCE amiea 





尽管 这 些 方法 在 过 去 确实 光彩 和 夺目， 但 在 今天 看 来 却 有 一 些 局 限 性 ， 而 
且 在 以 下 场景 中 还 会 暴露 出 明显 的 缺陷 。 
国 当 折 人 角 元 素 之 下 的 背景 不 是 纯色 ， 而 是 一 幅 图 案 、 一 层 纹理 、 一 张 
照片 、 一 幅 渐 变 或 其 他 任何 一 种 背景 图 像 时 。 
罩 当 我 们 想 要 一 个 45° 以 外 的 (旋转 的 ) 折 角 时 。 











“The only way to get rid of a 


temptation 1s to yleld to lt 
-一 OScar Wilde, 工 he Picture 


of Dorian Gray 











图 4-25 

我 们 的 起 点 : 元素 的 右上 角 通 过 
渐变 实现 了 切 角 效果 

4-26 


第 二 层 渐 变 用 来 生成 折 页 三 角形 ， 
这 里 单独 显示 出 来 了 ， 为 了 看 清 
文本 所 在 的 位 置 ， 我 们 把 文字 的 
颜色 暂时 从 白色 调 成 了 浅 灰色 


“The only way to get rid of a 
temptation ls to yield to it.™ 


-一 Oscar Wilde 工 he Picture 


of Dorian Gray 


4-27 
把 这 两 层 渐变 组 合 到 一 起 并 不 能 
产生 我 们 所 期 望 的 结果 











有 没有 一 种 办 法 可 以 用 CSS 创建 更 加 灵活 的 折 角 效果 ， 并 且 完 美满 足 
上 述 场景 呢 ? 


45° 折 角 的 解决 方案 


我 们 会 从 一 个 右上 和 角 有 具有 冬 面 切 角 的 元 对 开始 ， 这 个 切 角 是 由 “ 切 角 效 
果 ” 一 方 中 的 渐变 方案 实现 的 。 要 用 这 个 技巧 在 右上 和 角 创 建 一 个 大 小 为 lem 
的 冬 面 切 角 ， 代 码 会 是 这 样 的 〈 斧 单 的 演 染 戏 果 如 图 4-25 所 示 ): 





background: #58a; /* 回 退 样式 */ 
background: 
linear-gradient(-135deg, transparent 2em, #58a 0); 


走 到 这 里 ， 我 们 就 已 经 完成 了 一 半 : 接 下 来 所 需要 做 的 就 是 增加 一 个 
暗色 的 三 角形 来 实现 翻 折 效果 。 实 现 方 法 是 增加 另 一 层 渐 变 来 生成 这 个 三 
角形 并 将 其 定位 在 右上 角 ， 这 样 就 可 以 通过 background-size 来 控制 折 角 
的 大 小 。 


为 了 生成 这 个 三 角形 ， 我 们 所 和 宕 要 的 就 是 一 个 有 角度 的 线性 潮 变 ， 而 这 
个 渐变 的 两 个 色 标 需要 在 正中 央 重 合 : 





background: 
linear-gradient(to left bottom, 
transparent 56%, rgba(0,060,060,.4) 0) 
no-repeat 166% 0 / 2em 2em; 


在 图 4-26 中 ， 你 可 以 看 到 只 有 这 层 背 景 会 是 什么 样子 。 最 后 把 这 两 层 


背景 组 合 起 来 ， 应 该 就 可 以 收工 了 吧 ? 我 们 来 斌 试看， 不 过 要 切记 把 折 页 部 
分 的 三 角形 放 在 切 角 渐变 之 上 : 








background: #58a; /* 回 退 样式 */ 
background: 
linear-gradient(to left bottom, 
transparent 56%，rgba(6,6,0,.4) 0) 
no-repeat 166% 86 / 2em 2em， 
linear-gradient(-135deg, transparent 2em, #58a 0); 


在 图 4-27 中 可 以 看 到 ， 结 琳 并 不 是 我 们 所 期 望 的 那样 。 为 什么 它们 的 
尺寸 不 匹配 呢 ? 它们 可 都 是 2em 啊 ! 


原因 在 于 正如 我 们 在 “ 切 角 效果 ”一 市 中 所 讨论 的 那样 第 二 层 渐变 
中 的 2em 折 角 尺寸 是 写 在 色 标 中 的 ， 因 此 它 是 沿 着 渐变 轴 进 行 度量 的 ， 是 对 
角 线 尺寸 。 为 一 方面 ， 在 background-size 中 的 2em 长 度 是 背景 贴 片 的 宽 
度 和 高 度 ， 是 在 水 平和 垂直 方向 上 进行 度量 的 。 


为 了 将 这 两 者 对 齐 ， 我 们 需要 选择 以 下 任意 一 项 进行 调整 ， 选 择 哪 一 项 
取决 于 我 们 最 终 想 保留 哪 一 方 的 尺寸 设置 。 








恒 如 果 要 保留 对 角 线 的 2em 长 度 ， 就 要 将 background-size 乘 以 V2 。 
国 如 果 要 保留 水 平和 垂直 方向 上 的 2em 长 度 ， 就 要 用 切 角 渐变 的 角 标 “The only way to get rid of a 


temptation 1s to yield to lt 








位 置 值 除 以 万 9 GOscar Wilde. 工 he Picture 
由 本 background-size 需要 把 这 个 长 度 重 复 两 次 ， 而 且 绝 大 多 i 的 of Dorian Gray 
CSS 度量 都 不 是 在 对 角 线 上 进行 的 ， 因 此 第 二 种 方案 更 加 合适 。 色 标的 位 置 
2 
值 将 变 成 二 = V2 x1.414 213 562 ， 我 们 可 以 将 其 取 整 为 1.5em: 图 4-28 
2 在 改变 了 蓝 色 渐变 的 色 标 位 置 之 


后 ， 我 们 的 折 角 效果 最 终 达成 
background: #58a; /* 回 退 样式 */ 
background: 

linear-gradient(to left bottom, 
transparent 56%, rgba(60,60,060,.4) 90) 





@ 请 确保 该 元 素 已 经 留 出 了 不 


no-repeat 166% 0 / 2em 2em， 小 于 折 角 尺寸 的 内 边 距 ， 否 则 文 
sh 本 将 有 可 能 重合 在 折 页 部 分 之 上 
( 因为 它 只 是 背景 )， 这 将 会 破坏 


折 角 的 整体 效果 。 


transparent 1.5em, #58a 0); 


正如 图 4-28 所 示 ， 我 们 最 终 得 到 了 一 个 美观 、 灵 活 、 人 简约 的 折 角 效果 。 


play.csssecrets.io/folded-corner 


其 他 角度 的 解决 方案 


现实 生活 中 的 折 角 往往 不 是 精确 的 45*。 如 果 我 们 希望 它 看 起 来 更 真实 一 
些 ， 可 以 稍稍 改变 一 下 角度 ， 比 如 -156deg 可 以 产生 30° 的 切 角 。 不 过 ， 如 果 
我 们 只 是 改变 斜面 切 角 的 角度 ， 那 么 表示 翻 折 部 分 的 三 角形 并 不 会 跟着 改变 ， 
这 将 导致 整体 效果 被 破坏 ， 如 图 4-29 所 示 。 此 外 ， 调 整 这 个 三 角形 的 尺寸 并 
不 容易 。 它 的 尺寸 并 不 是 由 角度 来 定义 的 ， 而 是 由 宽度 和 高 度 来 定义 的 。 我 





、 、 六 时 之 -站 SS 、、、 = “The only way to get rid of a 
们 怎样 才能 得 到 需要 的 宽度 和 高 度 呢 ?好 的 ， 这 回 该 请 出 三 角 函数 了 ! A 

temptation 1s to yield to 1t. 

我 们 当前 的 代码 是 这 样 的 5 Oscar Wilde, The Picture 
of Dorian Gray 

background: #58a; /* 回 退 样式 */ 

background: 

linear-gradient(to left bottom, 图 4-29 
transparent 56%, rgba(6,06,06,.4) ©) 改变 切 角 的 角度 将 会 破坏 整体 效果 


no-repeat 166% 0 / 2em 2em， 


linear-gradient (=150deg, 


X 
transparent 1.5em, #58a 0); hk 一 X 一 | 


-一 一 2 


“Sen! 






在 图 4-30 中 可 以 发 现 ， 当 我 们 知道 这 两 个 30-60-90 直角 三 角形 "的 某 
一 条 直角 边 的 长 度 时 ， 基 本 上 就 可 以 算出 斜 边 的 长 度 。 图 4-31 所 示 的 三 角 郴 
数 示意 圆 告 诉 我 们 ， 只 要 知道 了 直角 三 角形 的 角度 和 某 一 条 边 的 长 度 ， 就 可 
以 通过 正弦 肾 数 、 余 弦 艺 数 以 及 色 股 定理 计算 出 男 外 两 条 边 的 长 度 。 我 们 在 


4-30 
| 切 角 渐变 的 放大 图 ( 图 中 用 灰色 
GD 30-60-90 直角 三 角形 表示 两 个 锐角 分 别 为 30" 和 60° 的 直角 三 角形 。 标 出 的 锐角 为 30? ) 
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图 4-31 

音 助 正弦 函数 和 余弦 函数 ， 我 们 
可 以 通过 直角 三 角形 的 锐角 角度 
和 冬 边 长 度 计 算出 直角 边 的 长 度 


“The only way to get rid of a 


temptation ls to yield to 1t.” 


-一 Oscar Willde. Nt Picture 


of Dorian Gray 





图 4-32 

尽管 达到 了 想 要 的 结果 ， 但 我 们 
可 以 看 出 ， 这 和 前 面 的 例子 相 比 
显得 更 不 真实 了 





4-33 

折 角 效果 在 现实 世界 中 的 版 本 ( 我 
的 两 个 小 表妹 Leonie 和 Phoebe 
Verou 送 给 我 的 漂亮 信纸 ) 


数学 书 〈 或 计算 硕 ) 里 已 经 知道 cos30°= 





V3 


. 1 
和 sin 30" = 了。 把 这 些 算式 代 


| i ] . 
和 我们 的 例子 ， 就 可 以 得 出 sin30"= 二 和 cos30 = 一 ， 因此 : 





CR 

2 Xx 

3 15,25 ,V21732 050 808 
2 Jy V3 


X2 十 yz2 = r2 


COSO = 


3x ss|< 


siND = 





到 了 这 里 ， 我 们 还 可 以 运用 勾 股 定理 计算 出 z: 


a 


现在 可 以 改变 三 角形 的 大 小 ， 让 它 更 符合 整体 效果 : 


background: #58a; /* 回 退 样式 */ 
background: 
linear-gradient(to left bottom, 
transparent 56%, rgba(0,060,0,.4) 0) 
no-repeat 166% 68 / 3em 1.73em， 
linear-gradient(-156deg， 
transparent 1.5em, #58a 6) 


此 时 ， 我 们 的 折 角 效果 如 图 4-32 所 示 。 如 你 所 见 ， 这 个 三 角形 现在 确 
实 已 经 跟 切 角 对 上 号 了 ， 但 这 个 结果 看 起 来 更 不 真实 了 ! 尽管 我 们 可 能 无 法 
很 快 地 找 出 具体 原因 ， 但 我 们 以 前 曾 见 过 无 数 的 折 角 ， 因 此 一 眼 就 可 以 发 现 
这 跟 我 们 印象 中 的 折 角 相去 其 远 。 如 果 你 拿 出 一 张 真实 的 纸 并 折 出 类 似 的 角 
度 ， 或 许 就 能 理解 它 为 什么 看 起 来 很 假 了 。 我 们 完全 不 可 能 把 一 张 纸 折 成 
(其 至 是 哪怕 是 接近 ) 图 4-32 的 那 种 样子 。 

来 看 看 现实 世界 中 的 折 角 比如 图 4-33 中 的 这 个 )， 我 们 会 发 现 这 个 
折 页 三 角形 是 需要 微微 旋转 的 ， 它 的 尺寸 跟 我 们 从 元 素 角 上 “ 切 ” 下 来 的 
那个 三 角形 应 该 是 一 致 的 。 由 于 我 们 无 法 旋转 背景 ， 这 里 终于 轮 到 伪 元 率 
登场 了 : 





.note { 
position: relative; 
background: #58a; /* 回 退 样式 */ 


background : 
linear-gradient(-156deg， 
transparent 1.5em, #58a 0); 
} 
.note::before { 
content: ''; 
position: absolute; 
top: 6; right: ©; 
background: linear-gradient(to left bottom, 
transparent 56%, rgba(060,060,0,.4) 0) 
166% 6 no-repeat ; 
width: 3em; 
height: 1.73em; 
} 








到 了 这 里 ， 我 们 只 不 过 是 把 图 4-32 中 的 效果 用 伪 元 素 又 实现 了 一 遍 。 
下 一 步 将 把 折 页 三 角形 的 width 和 height 对 调 ， 以 此 改变 它 的 方向 ， 这 样 
就 可 以 得 到 跟 折 页 缺口 对 称 的 三 角形 ， 而 不 是 一 个 可 以 补足 折 页 缺口 的 三 角 
形 。 然 后 ， 我 们 再 以 道 时 针 30。((90。- 30。) -30°) 来 旋转 这 个 折 页 三 角形 ， 
这 样 可 以 让 它 的 斜 边 与 折线 平行 : 








.note::before { 
content: ''; 
position: absolute; 
top: 6; right: 6; 
background: linear-gradient(to left bottom, 
transparent 56%，rgba(6,6,0,.4) 0) 
166% 0 no-repeat; 





在 图 4-34 中 ， 你 可 以 看 到 这 页 纸 在 经 过 上 述 调 整 之 后 会 是 什么 样子 。 
如 你 所 见 ， 我 们 基本 上 已 经 接近 目标 了 ， 但 还 需要 把 这 个 折 页 三 角形 再 挪动 
一 下 ， 以 便 让 这 两 个 三 角形 ( 深 色 的 三 角形 折 页 和 折 角 的 三 角形 缺口 ) 的 和 锋 
边 重 合 。 从 现在 的 情况 来 看 ， 它 在 水 平和 垂直 方向 上 都 需 进 行 移动 ， 因 此 
要 算出 这 两 个 仿 移 量 似乎 困难 重重 。 我 们 可 以 让 事情 变 得 更 简单 一 些 ， 把 
transform-origin 设置 为 bottom right， 让 三 角形 的 右 下 角 成 为 旋转 的 中 
心 ， 这 样 就 可 以 让 它 的 右 下 角 保 持 固 定 。 








.note::before { 
A* [|[ 革 作 人 |/ 
transform: rotate(-36deg) ; 
transform-origin: bottom right; 


) 


如 图 4-35 所 示 ， 现 在 只 需 在 垂直 方 同 上 加 上 移动 这 个 折 页 三 角形 驶 
可 以 了 。 为 了 算出 实际 要 移动 的 距离 ， 我 们 又 要 动用 几何 学 了 。 如 你 在 图 
4-36 中 所 见 ， 所 需 的 垂直 偏 移 量 是 x-y=3-V3 =1.267 949 192 ， 我 们 这 里 
取 整 为 1.3em: 


“The only way to get rid of a 


temptation ls to yield to it.” 


-一 Oscar Wilde. 工 he Picture 


of Dorian Gray 





4-34 
我 们 快要 接近 目标 了 ， 但 还 需要 
移动 这 个 折 页 三 角形 


“The only way to get rid of a 
temptation 1s to yield to 1t.” 


sm Oe Wilde. Mets Picture 


of Dorian Gray 





图 4-35 

添加 transform-origin: bott- 
om right; 会 让 事情 变 得 简单 一 
些 ， 只 需要 在 垂直 方向 上 移动 这 
小 折 页 三 角形 
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.note: :before { 
人 
transform: translateY(=1.3em) rotate(-36deg) ; 


transform-origin: bottom right; 


图 4-37 展示 了 简单 的 演 染 结果 ， 这 正 是 我 们 一 直 苦 苦 追 寻 的 效果 。 唉 ， 
真 不 容易 啊 ! 接 下 来 ， 由 于 这 个 折 页 三 角形 现在 是 由 伪 元 素来 实现 的 ， 我 们 
图 4-36 还 可 以 计 它 更 加 真实 一 些 ， 比 如 增加 圆 角 、( 真 正 的 ) 渐变 以 及 投影 ! 最 终 
算出 这 个 折 页 三 角形 所 需 的 移动 、 - 

se A A 

困难 





.note 1{ 
position: relative; 
background: #58a; /* 回 退 样式 */ 
background: 


人 要 确保 把 translateY() 变 linear-gradient(-156deg， 


形 放 在 旋转 变形 之 前 ， 否 则 这 个 transparent 1.5em, #58a 6) ; 
三 角形 会 在 30° 方 向 上 进行 移动 。 

因为 每 个 变形 步骤 都 会 改变 元 素 } 

的 整个 坐标 系统 ， 而 不 仅 是 改变 RN 

i content: ''; 

元 素 上 自身， position: absolute; 


top: 68; right: 0; 

background: linear-gradient(to left bottom, 
transparent 56%， 

“The only way to get rid of a 166% 6 no-repeat ; 

width: 1.73em; 

height: 3em; 

transform: translateY(-1.3em) rotate(-36deg); 


temptation ls to yield to it.™ 


— Oscar Wilde, The Picture 





of Dorian Gray transform-origin: bottom right; 
box-shadow: -.2em .2em .3em -.1lem rgba(0,0,0,.15); 
4-37 } 
这 两 个 三 角形 终于 对 齐 了 ， 和 谐 
MI 你 可 以 在 图 4-38 中 欣 蓉 到 我 们 的 辛勤 耕 炒 所 收获 的 人 硕果。 


eo 最 终 的 效果 看 起 来 很 不 错 ， 但 代码 是 不 是 够 DRY 呢 ? 让 我 们 来 看 一 看 ， 
[he only way to get rid of a 如 果 对 样式 做 些 改动 或 对 效果 做 些微 调 人 是 什么 情况 | 


temptation 1s to yield to lt 





—Owar Wilde, The Picture = 如 果 要 改变 元 素 的 宽 高 或 其 他 尺寸 (比如 内 边 距 等 )， 只 需要 修改 
of Dorian Gray 一 处 。 
a 如 果 要 改变 元 素 的 背景 色 ， 则 只 需要 修改 两 处 〈 如 果 不 写 回 退 样 式 
图 4-38 则 只 有 一 处 )。 
冻 的 样式 之 后 ， 、 、 
和 自如 果 要 修改 折 页 的 大 小 ,需要 修改 四 处 ， 并 做 一 些 复杂 的 计算 . 
日 如 果 要 修改 折 页 的 角度 ， 则 需要 修改 五 处 ， 并 做 一 些 更 加 复杂 的 
计算 。 


最 后 两 条 实在 是 很 不 理想 。 差 不 多 可 以 请 出 预 处 理 带 的 mixin 了 : 


omixin folded-corner($background, $size, 
$angle: 36deg) { 
position: relative; 
background: $background; /* 回 退 样式 */ 
background: 
linear-gradient($angle - 186deg， 
transparent $size, $background 0); 
border-radius: .5em; 


$x: $size / sin($angle); 
$y: $size / cos($angle); 


&: :before { 

content: ''; 

position: absolute; 

top: 6; right: ©; 

background: linear-gradient(to left bottom, 
transparent 56%, rgba(60,060,0,.2) 0, 
rgba(6,0,9,.4)) 166% 86 no-repeat; 

width: $y; height: $x; 

transform: translateY($y - $x) 

rotate(2*$angle - 96deg ) ; 

transform-origin: bottom right; 

border-bottom-left-radius: inherit; 

box-shadow: -.2em .2em .3em -.1lem rgba(6,6,0,.2); 


, 
] 
pe 7 
.note { 
Qinclude folded-corner(#58a, 2em, 46deg); 
} 


play.csssecrets.io/folded-corner-mixin 





0 编写 本 书 时 ， SCSS 还 设 
原生 支持 三 角 函 数 。 如 果 想 正常 使 
用 三 角 函 数 ， 需 要 用 到 Compass 

国 CSS 图 像 框架 ( http://compass-style.org ) 或 

其 他 库 。 借 助 泰勒 展开 式 ， 还 可 

以 自己 写 一 套 三 角 函 数 的 实现 。 

国 CSS 变形 另 和 LESS 原生 内 置 

了 三 角 上 函数 。 


CSS 背景 与 边框 
http:/w3.org/ 工 R/css-backgrounds 


http://w3.0org/TR/css-images 


http://w3.o0org/TR/css-transforms 
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设计 师 迷 恋 文本 的 两 端 对 齐 效果 。 看 一 眼 杂 志和 书籍 中 的 精美 排版 ， 
就 会 发 现 这 种 效 末 无 处 不 在 。 不 过 在 网 页 中 ， 两 问 对 齐 却 极 少 使 用 ， 而 且 
越 是 有 经 验 的 设计 师 就 越 少 使 用 。 从 CSS 1 开始 就 已 经 有 text-align: 
justify; 了 ， 为 什么 还 会 形成 这 个 局 面 呢 ? 


只 要 看 一 上 腿 图 5-1， 其 中 的 原因 就 会 立刻 浮 出 水 面 。 在 对 文本 进行 两 端 
对 齐 人 处理 时 ， 需 要 调整 单词 的 间距 ， 此 时 会 出 现 “ 单 词 狐 咏 ” 现 象 。 这 个 结 
条 不 仅 看 起 来 很 糟 糙 ， 而 且 损伤 了 可 读 性 。 在 打印 媒介 中 ， 两 端 对 齐 总 是 与 
连 字 符 断 行 相 辅 相 成 的 。 因 为 连 字 符 人 允许 单词 在 音节 分 界 处 断 开 并 折 行 ， 所 
以 在 处 理 对 齐 时 所 需要 调整 的 间距 就 少 得 多 了 ， 文 本 看 起 来 也 月 然 很 多 。 

以 前 ， 有 一 些 在 网 页 上 实现 连 字 人 符 断 行 的 方法 ， 但 这 类 方法 完全 是 “ 伤 
敌 八 百 ， 自 损 一 千 ”。 篆 见 的 方法 包括 服务 融 端 预 处 理 、JavaScript 后 期 处 
理 、 用 在 线 生 成 希 单 独处 理 ， 甚 至 还 有 开发 痢 耐 厦 性 子 在 单词 中 纯 手工 搬 和 人 
软 连 字 符 〈&shy; )， 以 便 浏 览 锅 可 以 在 正确 的 地 方 断 开 单 词 。 一 般 来 说 ， 这 
种 额外 成 本 很 不 划算 ， 因 此 设计 师 往往 会 改 用 其 他 的 文本 对 齐 方式 。 











CSS 文本 【第 三 版 ) 引入 了 一 个 新 的 属性 hyphens。 它 接受 三 个 值 : 


“The only way to 
rid 


temptation 1s to 


get of a 


yield to lt 


5-1 
CSS 两 端 对 齐 的 默认 效果 


与 计算 机 科学 中 的 很 多 事情 类 似 ， 文 本 折 行 听 起 来 简单 易 行 ， 但 实际 上 并 非 如 此 。 这 方面 的 算法 有 很 多 ， 


最 流行 的 方案 主要 是 贪 梦 算 法 和 Knuth-Plass 算法 。 贪 梦 算 法 的 工作 原理 是 每 


次 分 析 一 行 ， 把 尽 可 能 多 的 


单词 ( 当 连 字符 可 用 时 则 以 音节 为 单位 ) 填充 进 该 行 ， 当 遇 到 第 一 个 装 不 下 的 单词 或 音节 时 ， 就 移 至 下 一 


行 继 续 处 理 。 


Knuth-Plass 算法 ( 得 名 于 开发 它 的 工程 师 ) 的 工作 方式 就 要 高 级 很 多 。 它 会 
团 ， 从 而 产生 出 美学 上 更 令 人 愉悦 的 结果 ， 但 其 计算 性 能 要 明显 差 一 些 。 


绝 大 多 数 桌 面 文字 处 理 程序 采用 Knuth-Plass 算法 。 不 过 出 于 性 能 考虑 ， 浏 
因此 它们 的 两 端 对 齐 效果 往往 不 尽 如 人 意 。 


会 把 整 段 文本 纳入 孝 虑 的 范 


i 娩 目 前 采用 的 是 贪 柳 算 法 ， 








none、manual 和 auto。manual 是 它 的 初始 值 ， 其 行为 正好 对 应 了 现 有 的 
工作 方式 : 我 们 可 以 在 任何 时 候 手工 插入 软 连 字符 ， 来 实现 断 词 折 行 的 效 
采 。 很 显然 hyphens: none; 会 禁用 这 种 行为 ， 而 最 为 神奇 的 是 ， 只 和 需 这 短 
短 一 行 CSS 就 可 以 产生 我 们 梦 朵 以 求 的 效果 : 








hyphens: auto; 





se 仅 此 一 行 足 侨 。 你 可 以 在 图 5-2 中 看 到 它 的 效果 。 当 然 ， 为 了 确保 它 奏 
效 ， 你 需要 在 HTML 标签 的 1ang 属性 中 指定 合适 的 语言 。 其 实 不 管 怎样 ， 

get rid of a tempta- 这 本 来 就 是 你 早 该 做 好 的 份 内 之 事 。 

tion 1s to yield to lt 如 果 需 要 更 细 粒 度 地 控制 连 字符 的 1 了 为 《比如 在 简短 的 引文 中 你 仍 


图 5-2 然 可 以 通过 一 些 软 连 字 符 〈&shy; ) 来 辅助 浏览 器 进行 断 词 。 这 个 hyphens 
使 用 了 hyphens: auto 的 结果 属性 会 优先 处 理 它 们 ， 然 后 再 去 计算 其 他 可 以 断 词 的 地 方 。 


CSS 连 字 符 可 以 非常 平稳 地 退化 。 如 果 hyphens 属性 不 被 文 择 ， 得 到 
的 文本 对 齐 效 末 就 是 图 5-1 的 程度 。 这 个 效果 确实 算 不 上 好 看 ， 也 算 不 上 特 
别 易 读 ， 但 它 的 可 访问 性 还 是 完美 可 徘 的 。 


000 























如 果 你 是 一 位 更 偏重 设计 方向 的 网 页 开发 者 ， 你 可 能 很 难 接受 这 一 点 : 连 字 符 的 行为 只 有 一 个 开关 ， 没 有 
其 他 任何 设置 来 控制 它 的 断 词 方式 。 
不 过 接 下 来 的 这 个 消息 可 能 会 让 你 欢欣 致 舞 。 在 未 来 ， 我 们 可 以 更 细 粒 度 地 探 制 连 字 符 的 行为 ， 因 为 CSS 
文本 ( 第 四 版 ) ( http:/dev.w3.org/csswg/css-text-4 ) 计划 引入 一 些 相 关 的 新 属性 ， 比 如 : 
hyphenate-limit-lines 
hyphenate-limit-chars 
hyphenate-1limit-zone 
hyphenate-limit-last 


hyphenate-character 


字体 排 印 





插入 换行 





难 匮 





通过 CSS 来 插入 换 行 的 需求 通常 与 定义 列表 〈 人 参见 图 5-3) 有 关 ， 但 有 时 
也 涉及 其 他 场景 。 在 通 稼 情况 下 ， 采 用 定义 列表 是 因为 我 们 立志 在 互联 网 上 以 
身 作 则 ， 坚 持 使 用 合适 的 标签 、 合 理 的 语义 一 一 哪怕 在 视觉 上 所 要 呈现 的 上 只是 
一 行 行 的 名 值 对 ， 我 们 也 会 认真 对 待 。 举 例 来 说 ， 考 虑 下 面 这 段 结构 代码 : 





<dl> 
<dt>Name:</dt> 
<dd>Lea Verou</dd> 


<dt>Email:</dt> 
<dd>lea@verou.me</dd> 


<dt>Location:</dt> 
<dd>Earth</dd> 
</dl> 


我 们 所 期 望 的 视觉 效果 有 时 就 是 图 5-3 那样 的 简单 样式 。 第 一 步 通常 是 
给 它 添加 一 些 基 本 的 CSS: 


dd { 
margin: 6; 
font-weight: bold; 
1 





不 过 ， 由 于 这 些 <dt> 和 <dd> 都 是 块 级 元 素 ， 我 们 最 终 得 到 的 往往 
是 图 5-4 这 样 的 结果 ， 所 有 的 名 和 值 均 独 占 一 行 。 我 们 接 下 来 可 能 会 给 这 
些 <dt> 或 <dd> 元 系 (或 两 者 ) 指定 其 他 的 display 属性 值 一 一 人 们 走 
投 无 路 时 往往 会 胡乱 尝试 。 不 过 这 样 一 来 ， 我 们 得 到 的 结果 通常 如 图 5-5 
所 示 。 

在 我 们 把 头发 揪 光 、 办 路 CSS 或 者 干脆 放弃 结构 与 样式 分 离 转 而 修改 
结构 之 前 ， 有 没有 办 法 可 以 同时 保全 我 们 的 神智 和 “技术 上 的 ) 操守 ? 


解决 方案 


基本 上 ， 我 们 需要 做 的 只 是 在 每 个 <dd> 后 面 添加 一 个 换行 。 
乎 使 用 表现 型 的 结构 标记 ， 可 以 请 出 老 套 的 <bry 元 素 ， 比 如 这 样 : 





如 果 不 在 


Name: Lea Verou 
Email: leaverou.me 


Location: Earth 


5-3 


一 个 定义 列表 ， 每 行 都 是 一 个 名 


值 对 


Name: 
Lea Verou 
Emall: 


leaWverou.me 


Location: 
Earth 
5-4 
这 个 定义 列表 的 默认 样式 


Name: Lea Verou Email: 


leaverou.me Location: Earth 


5-5 


display:inline 在 这 里 会 帮 倒 忙 


21 搬入 换行 


<1-- 如 果 你 这 样 写 ,天 前 地 裂 万 动 不 复 --> 
<dt>Name:</dt> 
<dd>Lea Verou<br /></dd> 








然后 ， 对 所 有 的 <dt> 和 <dd> 元 素 应 用 display:inline; 样式 ， 基 本 
上 就 大 功 告 成 了 。 当 然 ， 这 种 方法 不 仪 在 可 维护 性 方面 是 一 种 糟糕 的 实践 ， 
而 且 污 染 了 结构 层 的 代码 。 只 要 能 使 用 生成 性 内 容 来 添加 换行 ， 并 以 此 取代 
<br> 元 率 ， 那 么 问题 就 可 以 解决 了 ! 但 这 好 像 做 不 到 ， 对 吧 ? 叉 或 者 ， 这 
其 实 可 行 的 ? 

实际 上 ， 有 一 个 Unicode 字符 是 专门 代表 换行 符 的 :exeeeA”。 在 CSS 中 ， 
这 个 字符 可 以 写作 "\8668A" ， 或 徐 化 为 "\A"。 我 们 可 以 用 它 来 作为 : :after 
伪 元 素 的 内 容 ， 并 将 其 添加 到 每 个 <dd> 元 素 的 尾部 ， 代 码 如 下 所 示 : 











dd::after { 
content: "\A"，; 
} 








这 上 段 代码 看 起 来 是 可 以 奏效 的 ， 但 如 有 果 我 们 亲手 试 一 试 ， 就 会 发 现 结 
果 令 人 失望 : 跟 图 5-5 相 比 没有 任何 变化 。 不 过 ， 这 并 不 表示 我 们 的 思路 
不 对 ， 只 是 表示 我 们 还 忽略 了 什么 。 这 段 CSS 代码 所 做 的 其 实 只 相当 于 在 
HTML 结构 中 的 所 有 关闭 标签 </dd> 之 前 添加 换行 符 。 还 记得 在 HTML 代 
但 中 输入 换行 符 会 发 生 什 么 吗 ? 黑 认 情况 下 ， 这 些 换行 符 会 与 相 邻 的 其 他 空 
日 符 进行 合并 。 空 蝗 符 合并 通常 是 一 件 非常 好 的 事情 ， 否 则 我 们 就 得 把 整个 
HTML 文档 的 源 代码 整理 进 一 行 里 面 ! 不 过 ， 有 时候 我 们 希望 保留 源 代码 中 
的 这 些 空白 符 和 换行 ， 代 人 码 块 就 是 最 典型 的 例子 。 还 记得 我 们 在 这 种 场景 
通常 会 怎么 做 吗 ? 我们 会 用 到 white-space: pre;。 这 里 也 可 以 这 么 做 ,但 
只 对 伪 元 素 生 成 的 换行 符 设 置 这 个 样式 。 

我 们 只 有 一 个 换行 符 ， 并 不 用 担心 有 其 他 空白 符 被 保留 下 来 〈 因 为 这 
里 根本 就 没有 )， 因 此 任何 pre 值 都 可 以 起 作用 (pre、pre-line 或 pre- 
wrap)。 我 推荐 pre, 因为 它 的 浏览 器 支持 程度 最 好 。 把 这 些 思路 整理 成 代码 : 











dt, dd { display: inline; } 


dd { 
margin: 6; 
font-weight: bold; 
} 


dd::after { 
content: "\A"; 


QD 从 技术 上 来 说 ，86xe8e8A 相当 于 “换行 ”字符 ， 也 就 是 我 们 在 JavaScript 中 常 写 的 "\n"。 男 
外 还 有 一 个 “ 回 车 ”字符 ( 即 JavaScript 中 的 "\r"，CSS 中 的 AD" )， 不 过 我 们 在 现代 浏览 
器 中 已 经 不 需要 用 到 这 个 字符 了 。 





white-space: pre; 


} 








如 有 果 你 亲手 测试 一 下 ， 束 会 发 现 这 个 办 法 真 的 有 效 ， 它 的 泻 染 结 果 与 
5-3 一 模 一 样 ! 不 过 ， 这 种 方法 足够 健壮 吗 ? 假设 我 们 要 给 定义 列表 中 的 这 
位 用 户 添 加 第 二 个 邮箱 : 





<dt>Email:</dt> 
<dd>lea@verou.me</dd> 
<dd>leaverou@mit.edu</dd> 


Name: Lea Verou 
Email: lea(Overou.me 
leaverou(Wmit.edu 


Location: Earth 





结果 如 图 5-6 所 示 ， 有 些 英名 其 妙 。 由 于 我 们 在 每 个 <dd> 的 后 面 都 加 
本 一 个 换行 符 ， 每 个 值 都 会 被 分 到 单独 一 行 中 ， 其 至 在 不 需要 换行 的 时 候 也 
钙 如 此 。 如 有 宁 多 个 并 列 的 值 以 去 号 分 隔 并 且 排 在 同一 行 中 《假设 容 涟 的 宽度 
足够 )， 就 会 好 得 多 本 。 


在 理想 情况 下 ， 我 们 只 想 针对 <dt> 之 前 的 最 后 一 个 <dd> 来 插入 换行 ， 
而 不 是 对 所 有 的 <dd> 都 这 样 做 。 不 过 ， 这 对 于 当前 CSS 选择 符 的 功能 来 说 
还 是 不 可 能 的 ， 因 为 选择 符 无 法 做 到 先 在 DOM 树 中 选中 主体 元 杂 ， 再 倒 回 
去 查询 它 之 前 的 元 素 。 我 们 需要 换 种 方式 来 思考 。 一 个 想法 就 是 换行 符 不 用 
加 在 <dd> 的 后 面 ， 而 是 加 在 <dt> 的 前 面 : 
































dt::before { 
content: '\A'，; 
white-space: pre; 


1 

这 会 导致 第 一 行 变 为 空 行 ， 因 为 选择 符 对 第 一 个 <dt> 也 是 生效 的 。 为 
了 规避 这 个 问题 ， 可 以 尝试 使 用 以 下 这 些 选 择 符 来 奉 代 单纯 的 dt: 

国 dt:not(:first-child) 

国 dt ~ dt 

加 dd + dt 

我 们 将 采用 最 后 一 种 方案 ， 因 为 即使 是 在 多 个 <dt> 共用 同一 个 值 的 场 
景 下 ， 它 也 是 可 以 正常 工作 的 ; 而 男 外 两 者 在 这 种 情况 下 还 是 会 出 问题 。 有 
些 时 候 ， 我 们 可 能 还 是 需要 把 多 个 <dd> 显 式 分 隔 开 ， 除 非 我 们 觉得 多 个 
值 以 空格 作为 分 隔 是 可 以 接受 的 (这 种 方式 在 某 些 时 候 表 现 民 好 ， 但 有 时 














5-6 
当 遇 到 多 个 <dd> 时 ， 我 们 的 解 
决 方案 就 不 灵 了 


则 不 一 定 )。 在 理想 情况 下 ， 我 们 希望 能 够 告诉 浏览 句 “ 只 在 后 面 还 跟着 一 
个 <dd> 的 <dd> 尾部 插入 过 号 ”但 我 们 又 一 次 遇 上 了 那个 限制 ， 眼 下 的 
CSS 选择 符 还 表达 不 出 这 种 需求 。 因 此 ， 我 们 再 次 调整 思路 ， 在 每 个 前 面 有 
<dd> 的 <dd> 头 部 插入 如 号。 最终 CSS 代码 会 变 成 (可 以 在 图 5-7 中 看 到 代 
码 的 效果 ) : 





dd + dt::before { 
content: '\A'; 
white-space: pre; 


} 


dd + dd::before { 
content: ', '; 
font-weight: normal; 


} 
0 Name: Lea 
Soe ame: Lea Verou 
最 终 效 果 


Email: lea(Wverou.me, leaverou(malt.edu 


Location: Earth 


干 万 要 记 住 ， 如 打 你 的 结构 代码 在 多 个 连续 的 <dd> 之 间 包 含 了 (未 加 
注释 的 ) 空 得 从 ， 那 么 逗号 前 面 会 有 一 个 空格 。 有 很 多 方法 可 以 修复 这 个 问 
如 ， 但 都 不 够 完美 。 其 中 一 种 方法 是 利用 负 外 边 距 : 





dd + dd::before { 
content: ", '; 
margin-left: -.25em; 
font-weight: normal; 


} 





这 个 方法 可 行 ， 但 不 够 可 徘 。 如 果 你 的 内 容 是 以 不 一 样 的 字体 和 尺寸 来 
显示 的 ， 这 个 空 际 的 宽度 就 不 一 定 刚好 是 6.25em。 在 这 种 情况 下 ， 结 果 看 
起 来 就 不 那么 理想 了 。 不 过 对 绝 大 多 数字 体 来 说 ， 这 种 误差 基本 上 是 可 以 忽 
略 的 。 


He ea 








文本 行 的 斑马 条 纹 





CSS 渐变 ，background-size,“ 条 纹 背 景 ",“ 灵 活 的 背景 定位 





难 十 


几 年 前 ， 在 刚刚 获得 :nth-child()/:nth-of-type() 伪 类 之 后 ， 我 们 
最 常用 其 来 解决 的 一 个 需求 就 是 表格 的 “斑马 条 纹 ”( 人 参见 图 5-8)。 这 在 以 
前 需要 服务 器 端 预先 处 理 、 客 户 端的 脚本 处 理 或 者 是 纯 手 工 写 死 来 实现 ， 而 
现在 只 需 下 面 这 几 行 简单 的 代码 就 足够 了 了: 





tr:nth-child(even) { 
background: rgba(6,9,6,.2); 
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《 县 3 图 呈 Io 要 -所 人 次 ~| 由 Q_Search 
一 一 一 一 一 一 =- 一 =- 一 一 一 一 -一 一 一 一 一 一 Se ~ ~ 可 | | 
i i 以 斑马 条 纹 的 样式 来 呈现 表格 早 
Favorites | Name Date Modified Size Kind 入 A ~ 人 、 旧 \ 几 、 
嫂 Dropbox > DO .git Today, 17:24 -- Foider 上 平 人 吊 见 3 个 [了 征 在 UI D4 计 
人 » Dl figures Today, 17:23 -- Folder 一 
昌 AlMyFies | 、 国 theme Nov 22, 2013, 02:57 -- Folder 一 人 em 如 本 所 示 的 Mac OS X 
< iCloud Drive 司 chapter-animations.html Nov 12, 2014, 00:23 63 KB HTML text ， ~ \ 不 上 旦 < 下 
® Airprop 司 chapter-backgrounds.html Feb 1, 2015, 17:11 85KB HTML text Yosemite 义 件 列 表 ) 3 还 AE 在 下 
司 chapter-effects.html Today, 16:23 55KB HTML text Nai ~ 入 公 
辆 Documents § chapter-introduction.html Yesterday, 17:22 61KB HTML text 面 于 中 9 原 在 于 斑 号 东 纹 可 
司 chapter-| .html Jan 28, 2015, 12:06 55KB HTML ~ 人 Do 、 、 
NE | ER Rt 以 帮助 我 们 更 容易 地 把 视线 保持 
Desktop se 
所 chapter-typographyhtmi Today, 18:00 60 KB [a JJ 二 名 NTIZ CR 
i 园 Pictures | 司 chapter-ux.html Today, 16:23 63 KB HTML text 本 长 未 k 于 TT 日 内 
从 leaverou copyright.html Nov 11, 2013, 04:51 151 bytes HTML text 
| © cover.html Nov 11, 2013, 04:53 62 bytes HTML text 
A Applications 司 index-spec.html Jan 27, 2015, 21:06 74 bytes HTML +text 
图 Movies © preface.html Nov 11, 2013, 04:51 70 bytes HTML text 
MIT 看 test.html Sep 29, 2014, 03:01 856 bytes HTML text 
司 titlepage.html Nov 11, 2013, 04:44 156 bytes HTML text 
国 Sereenshots 司 tochtml Nov 11, 2013, 04:30 10 bytes HTML text 








1of24 selected, 125.67 GB availabie 


尽管 如 此 ， 当 我 们 想 把 表格 行 的 这 种 效果 应 用 到 文本 行 时 ， 仍 然 有 些 
力不从心 *。 这 种 效果 对 于 提高 代码 段 的 可 读 性 来 说 尤为 实用 。 很 多 开发 者 
最 终 不 得 不 使 用 JavaScript 来 把 每 行 代码 包 里 进 一 个 个 <div> 元 素 中 ， 然 后 





J 很 多 焦头烂额 的 开发 者 甚至 向 CSS 工作 组 申请 增加 :nth-line() 这 样 的 伪 元 素 ， 不 过 由 于 
性 能 上 的 考量 被 拒绝 了 。 


22 文本 行 的 斑马 条 纹 


while (true) { 
var d = new Date(); 
if (d.getDate()==1 && 
d.getMonth()==3) { 
alert("TROLOLOL"); 
} 
} 


图 5-9 
一 小 段 代 码 ， 疫 有 斑马 条 纹样 式 ， 
只 有 一 片 朴素 的 实 色 背景 


while (true) { 
var d = new Date(); 
if (d.getDate()==1 && 
d.getMonth()==3) { 
alert("TROLOLOL"); 
} 
} 


图 5-10 


我 们 在 尝试 给 代码 段 加 上 斑马 条 


纹 时 走出 的 第 一 步 


运用 上 述 :nth-child() 技巧 来 实现 斑马 条 纹 一 一 幸好 大 多 数 语法 着 色 脚 本 
都 可 以 顺 膏 消化 抒 这 个 令 人 头皮 发 怀 的 过 程 。 这 种 方式 并 不 理想 ， 它 不 仅 
在 理论 上 有 违 纯粹 原则 〈JavaScript 不 应 该 摊 和 到 样式 层面 来 )， 而 且 过 多 的 
DOM 元 素 还 会 拖累 整个 页 面 的 性 能 ， 此 外 ， 它 其 实 不 太 健壮 。( 当 你 增 大 字 
号 导致 其 中 的 某 一 “ 行 ”发 后 折 行 时 会 怎么 样 ? ) 我 们 还 有 更 好 的 办 法 吗 ? 


解决 方案 


抛 开 以 前 那 种 给 每 一 行 全 元素 再 加 背景 的 做 法 ， 我 们 换 一 种 思路 来 重 
新 考虑 这 个 问题 。 为 什么 不 对 整个 元 素 设 置 统一 的 育 景 网 像 ， 一 次 性 加 上 所 
有 的 斑马 条 纹 呢 ?在 听 起 来 这 好 像 是 个 糟糕 的 点 子 ， 但 别 忘 了， 我 们 可 以 在 
CSS 中 用 渐变 直接 生成 背景 图 像 ， 而 且 可 以 用 em 单位 来 设 定 背景 尺寸 ， 这 
背景 就 可 以 自动 适应 font-size 的 变化 了 。 


让 我 们 用 这 个 方法 给 图 5-9 中 的 这 段 代码 加 上 斑马 条 纹 。 首 先 ， 我 们 
需要 运用 “条 纹 背 景 ” 一 方 中 所 描述 的 方法 ， 创 建 出 水 平 条 纹 背 景 。 它 的 
background-size 需要 设置 为 1ine-height 的 两 倍 ， 因 为 每 个 背景 贴 片 需 
要 覆盖 两 行 代码 。 我 们 最 初 尝 试 写 出 的 代码 可 能 是 这 样 的 : 























padding: .5em; 
line-height: 1.5; 
background: beige,; 
background-image: linear-gradient( 
rgba(6,90,9,.2) 56%, transparent 0); 
background-size: auto 3em; 


如 图 5-10 所 示 ， 这 个 结果 跟 我 们 的 预期 已 经 相当 接近 了 。 我 们 甚至 可 
以 试 着 改变 字号 ， 条 纹 也 会 跟着 放大 或 缩小 ! 不 过 ， 有 一 个 严肃 的 小 问题 不 
可 忽视 : 代码 行 和 条 纹 是 错位 的 ， 破 坏 了 整体 效果 。 这 是 怎么 回 事 ? 


如 末 近 距离 地 观察 图 5-10， 你 可 能 就 会 发 现 ， 第 一 条 条 纹 是 从 容 融 
的 最 顶部 开始 的 ， 这 是 青 景 图 像 最 平 向 的 表现 。 不 过 ， 我 们 的 代码 并 不 是 
从 那里 开始 的 ， 因 为 那样 排版 会 显得 很 局 促 。 如 你 所 见 ， 我 们 对 容 絮 应 用 
了 .5em 的 内 边 跑 ， 这 个 距离 正 是 这 些 条 纹 与 理想 位 置 之 间 的 侦 差 。 


有 一 个 办 法 可 以 解决 这 个 问题 ， 那 就 是 用 background-position 把 问 
条 纹身 底部 移动 .5em。 不 过 ， 如 果 我 们 以 后 决定 调整 内 边 跑 ， 还 需要 相应 
地 修改 背景 定位 值 ， 这 显然 不 够 DRY。 可 以 让 背景 自动 跟着 内 边 距 的 宽度 
走 中 ? 

证 我 们 回顾 一 下 “灵活 的 背景 定位 ”中 提 到 的 background-origin。 这 
个 属性 正 是 我 们 所 需要 的 : 它 可 以 告诉 浏览 套 在 解析 background-position 
时 以 content box 的 外 沿 作为 基准 ， 而 不 是 默认 的 padding box 外 治 。 现 在 把 























这 一 点 也 加 入 代码 中 ”: 


padding: .5em; 

line-height: 1.5; 

background: beige; 

background-size: auto 3em; 

background-origin: content-box; 

background-image: linear-gradient(rgba(6,9,6, .2) 56%， 
transparent 0); 


在 图 5-11 中 可 以 看 到 ， 这 上 段 样式 正好 可 以 达成 我 们 想 要 的 斑马 条 纹 效 
果 ! 因为 我 们 是 用 半 透 明 色 来 生成 条 纹 的 ， 所 以 在 改变 背景 色 时 ， 斑 马 条 纹 
仍然 可 以 正常 显示 。 这 个 方法 总 体 来 说 是 十 分 灵活 的 ， 了 唯一 可 能 破坏 效果 的 
情况 2 可 能 就 是 在 改变 line-height 时 忘 了 相应 地 调整 background-size。 








play.csssecrets.io/zebra-lines 


四 CSS 背景 与 边框 
http://w3.o0org/TR/css-backgrounds 


四 CSS 图 像 
http://w3.0org/TR/css-images 





调整 tab 的 宽度 





难题 


包含 大 量 代码 的 网 页 《比如 文档 或 教程 ) 在 样式 上 面 对 春 无 法 回避 的 挑 





战 。 我 们 通常 使 用 <pre> 和 <code> 元 素来 显示 代码 ， 它 们 具有 浏览 硕 所 赋 
子 的 默认 样式 。 这 些 移 认 样 式 往往 是 : 


G 为 什么 不 把 所 有 与 背景 相关 的 值 都 以 简写 的 方式 写 进 background 属性 中 ? 因为 那样 的 话 ， 
我 们 还 得 为 旧版 浏览 带 再 写 一 行 回 退 样式 ， 这 意味 着 我 们 需要 把 beige 写 两 志 ， 这 显然 有 
违 DRY 原则 。 

@) 本 节 的 一 个 前 提 就 是 我 们 处 理 的 是 代码 段 。 在 其 他 情况 下 ， 如 果 有 行内 元 素 把 行 框 撑 得 比 常 
规 行 高 更 大 《比如 有 张 图 片 或 行内 元 素 设 置 了 更 大 的 字号 )， 则 这 个 效果 也 会 被 破坏 。 























while (true) { 
var d = new Date(); 
if (d.getDate()==1 && 
d.getMonth()==3) { 
alert("TROLOLOL"); 


23 调整 tab 的 宽度 


while (true) { 
var d = new Date(); 
if (d.getDate()==1 
d.getMonth( )==3 
alert("TROL 


} 


图 5-12 
代码 是 以 tab 的 默认 宽度 (8 个 
字符 ) 来 显示 的 


while (true) { 
var d = new Date(); 
if (d.getDate()==1 && 
d.getMonth()==3) { 
alert("TROLOLOL"); 
} 
} 
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代码 还 是 图 5-12 中 的 那 段 代码 ， 
但 tab 的 宽度 被 显示 为 2 个 字符 
的 宽度 


while (true) { 

var d = new Date(); 

if (d.getDate()==1 && 
d.getMonth()==3) { 

alert("TROLOLOL"); 

h 

1 


图 5-14 

代码 中 的 tab 宽度 被 设置 为 0， 
这 导致 所 有 基于 tab 的 缩 进 效果 
都 消失 了 一 一 千 万 别 这 么 做 


pre, code f 
font-family: monospace; 


) 

pre { 
display: block; 
margin: 1em ©; 
white-space: pre; 

) 


这 远 不 足以 解决 代码 展示 所 独 有 的 种 种 挑战 。 这 其 中 最 大 的 一 个 问题 
在 于 ， 即 使 tab 非常 适合 用 来 缩 进 代码 ~"， 但 人 们 在 网 页 中 却 常常 有 意 避 开 
tab。 这 是 因为 浏览 器 会 把 其 宽度 显示 为 8 个 字符 ! 看 看 图 5-12 就 可 以 发 
现 这 么 宽 的 缩 进 是 多 么 难看 、 多 么 浪费 : 这 有 段 代码 其 至 已 经 装 不 进 这 个 容 
J 


解决 方案 


谢 天 谢 地 ， 在 CSS 文本 (第 三 版 中 ， 一 个 新 的 CSS 属性 tab-size 
可 以 控制 这 个 情况 。 这 个 属性 接受 一 个 数字 (表示 字符 数 ) 或 者 一 个 长 度 值 
(这 个 不 那么 实用 )。 我 们 通常 希望 把 它 设置 为 4 (表示 4 个 字符 的 宽度 ) 或 
2， 后 者 是 最 近 更 为 流行 的 缩 进 尺 寸 。 














pre { 
tab-size: 2; 


1 


可 以 在 图 5-13 中 看 到 结果 ， 它 看 起 来 要 易 读 得 多 。 你 甚至 可 以 把 tab- 
size 设置 为 6 来 完全 禁用 tab， 但 这 通常 不 是 什么 好 主意 ， 因 为 它 的 效果 会 
变 成 如 图 5-14 所 示 。 即 使 浏览 需 不 文 持 这 个 属性 ， 一 切 也 依然 安 好 一 一 我 
们 得 到 的 tab 宽度 只 不 过 是 夸张 的 默认 样式 而 已 ， 而 这 副 样子 我 们 早已 忍受 
多 和 千本。 


play.csssecrets.io/tab-size 


国 CSS 文本 








http://w3.org/TR/css-text 











Q) 你 是 不 是 一 看 到 缩 进 代 码 就 心 生 慎 意 ?这 个 话题 确实 超出 了 本 书 的 范畴 ， 但 你 可 以 在 这 篇 文 
章 (http://lea.verou.me/2012/01/why-tabs-are-clearly-superior〉 里 找到 我 的 思考 过 程 。 
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难 匮 


就 像 人 与 人 一 样 ， 字 形 (glyph) 与 字形 也 不 都 是 和 有 睦 相 处 的 。 举 个 fi 


例子 ， 大 多 数 衬 线 字 体 中 的 f 和 ji 就 是 如 此 。i 的 圆 点 往往 会 与 后 的 升 部 
(ascender) 发 生 冲 突 ， 导 致 两 者 都 显示 不 清 〈 人 参见 图 5-15 中 的 第 一 个 例子 )。 

为 了 缓解 这 个 问题 ， 字 体 设 计 师 通常 会 在 字体 中 包含 一 些 额 外 的 字形 ， 
称 作 连 字 〈1ligature)。 这 些 字形 被 设计 为 双 字 形 或 三 字形 的 单一 组 合体 ， 专 


门 提供 给 排版 软件 使 用 ， 代 为 显示 特定 的 字符 组 合 。 淮 例 来 说 ， 图 5-15 驶 
列 出 了 一 些 稼 见 的 连 字 ， 我 们 可 以 看 出 这 些 连 字 的 显示 效果 比 原 有 普通 字形 
的 组 合 效果 好 很 多 ”。 


还 有 一 种 所 请 的 酌情 连 字 (discretionary ligature)， 它 纯粹 是 一 种 设计 上 


的 备 选 风格 ， 并 非 是 因为 蘑 些 字符 在 相 邻 时 会 相互 干扰 (参见 图 5-16)。 
不 过 ， 浏 览 器 在 默认 情况 下 永远 也 不 会 使 用 酌情 连 字 (这 种 行为 是 1 


正确 的 )， 而 且 往 往 不 会 使 用 通用 连 字 (这 就 是 个 bug 了 )。 其 实在 不 久之 
前 ， 我 们 还 只 能 通过 Unicode 中 的 连 字 字符 来 强制 产生 连 字 效果 ， 比 如 输入 ”图 5-15 
&#xfb81; 可 以 得 到 fi 的 连 字 字符 。 这 种 方法 显然 是 得 不 傍 失 的 。 大 多 数 衬 线 字体 中 常见 的 连 字 
由 .场景 
国 显然 ， 它 让 结构 层 的 代码 变 得 很 不 好 读 ， 而 有 旦 更 不 好 写 。( 但 愿 你 能 
认 出 de&#xfb861;ne 这 个 单词 是 什么 ! ) 


国 如果 当前 字体 不 包含 这 个 连 字 字符 ， 结 果 就 跟 “ 绑 票 字 条 ”一 个 样 
(参见 图 5-17)。 
国 并 不 是 每 个 连 字 效果 都 有 一 个 对 等 的 、 标 准 的 Unicode 字符 。 比 如 ， 4 


还 没有 任何 Unicode 字符 跟 ct 的 连 字 效果 有 关系 ， 所 有 包括 这 个 连 
字 字 型 的 字体 都 只 能 把 它 存放 在 Unicode 的 PUA (Private Use Area， 


私有 用 途 区 ) 区 块 中 。 

罩 这 会 破坏 文本 的 可 访问 性 ， 包 括 对 文本 的 复制 / 粘贴、 搜索 ， 以 及 语 

音 处 理 等 。 有 很 多 智能 的 应 用 程序 可 以 很 好 地 处 理 这 种 情况 ， 但 这 不 ( 
代表 整体 情况 。 在 某 些 浏览 带 中 ， 这 些 字 符 甚 至 无 法 被 正常 搜索 到 。 

不 过 在 眼下 这 个 时 代 ， 应 该 已 经 有 更 好 的 办 法 出 现 了 ， 对 吧 ? 图 5-16 


很 多 经 过 专业 设计 的 衬 线 字 体 也 
会 自主 设置 一 些 非 常规 的 连 字 
























































J 实际 上 我 们 第 用 的 简写 and 符号 〈 信 ) 最 开始 就 是 字母 E 和 t 的 连 字 (et 在 拉丁 文中 就 是 
and 的 意思 )。 


esp 
能 9 
应 用 的 字体 不 包含 


解决 方案 


在 CSS 字体 (第 三 版 〉(http://w3.org/TR/css3-fonts〉 中 ， 原 有 的 font- 
variant 被 升级 成 了 一 个 简写 属性 ， 由 很 多 新 的 展开 式 属性 组 合 而 成 。 其 
中 之 一 叫 作 CI 专门 用 来 控制 连 字 效果 的 开局 和 关 
财 。 如 采 要 局 用 所 有 可 能 的 连 字 ， 需 要 同时 指定 这 三 个 标识 符 : 


font-variant-ligatures: common-ligatures 
discretionary-ligatures 
historical-ligatures; 





这 个 属性 是 可 继承 的 。 比 如 ， 发 现 酌 情 连 学 可 能 会 干扰 到 正 常 文学 的 阅 
数 条 时 ， 你 可 能 和 硕 望 把 它 单独 天 掉 。 在 这 种 情况 下 ， 你 可 能 只 想 开局 通用 


at 


该 
连 


疏 


font-variant-ligatures: common-ligatures; 


你 甚至 可 以 显 式 地 把 其 他 两 种 连 字 关闭 : 


font-variant-ligatures: common-ligatures 
no-discretionary-ligatures 
no-historical-ligatures; 


font-variant-ligatures 还 接受 none 这 个 值 ， 它 会 把 所 有 的 连 字 效果 都 
关 掉 。 于 万 不 要 使 用 none， 除 非 你 绝对 清楚 自己 是 在 做 什么 。 如 果 要 把 font- 
variant-1igatures 属性 复位 为 初始 值 ， 应 该 使 用 normal 而 不 是 none。 


国 CSS 字体 


http://w3.org/TR/css-fonts 





难 十 





在 文学 作品 的 字体 排 印 中 ， 你 会 发 现 人 简写 的 久 符 号 售 受 推 潜 。 没 有 其 
他 字符 可 以 像 精心 设计 的 & 那 样 迅速 传递 出 优雅 的 气质 。 所 有 网 站 部 璋 精 
竭 虑 ， 试 图 找 出 一 种 能 够 体现 文字 符 之 美的 最 佳 字体 。 不 过 ， 可 以 显示 出 
优美 文字 符 的 字体 往往 并 不 适用 于 页 面 中 的 其 他 文本 。 毕 竞 对 于 标题 来 说 ， 











真正 美丽 而 优雅 的 效果 正 是 来 源 于 清爽 的 无 衬 线 字 体 与 华丽 的 衬 线 & 符号 之 


间 的 对 比 。 


CS 5 CF 全 


网 页 设计 师 在 很 时 以 前 就 意识 到 了 这 一 点 ， 但 所 能 找到 的 实现 方法 却 十 











分 粗糙 和 楷 琐 。 这 些 方法 往往 要 求 我 们 通过 脚本 或 纯 手工 地 用 “span> 标签 
把 每 个 & 符 扎 包 起 来 ， 就 像 这 样 : 


HTML “span class="amp">&amp;</span> CSS 


然后 ， 给 .amp 这 


.amp { 


个 类 指定 我 们 想 要 的 字体 样式 : 


font-family: Baskerville, "Goudy 01d Style", 
Garamond, Palatino, serif; 
font-style: italic; 


| 





这 种 方法 确实 可 以 藤 效 ， 你 可 以 在 图 5-19 中 看 到 美化 前 后 的 对 比 图 。 


但 是 ， 这 个 实现 方法 相当 麻烦 ， 





而 且 有 时 完全 行 不 通 : 在 某 些 情 况 下 《比如 


在 CMS 环境 下 )， 我 们 根本 无 法 轻易 地 修改 HTML 结构 。 难 道 不 能 让 CSS 


去 单独 天 化 东 个 特 


> 人 > AAA- 


定子 和 从 吗 ? 
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绝 大 多 数 电 脑 都 包含 了 某 种 具 
有 优美 & 符 号 的 字体 ， 从 左 到 
右 的 字体 分 别 为 Baskerville、 
Goudy Old Style、Garamond 和 
Palatino ( 均 以 斜体 风格 显示 ) 


HTML & CS 
HTML CSS 


5-19 
这 个 “HTML & CSS” 标 题 中 的 
& 符号 在 美化 前 后 的 效果 对 比 


25 ”华丽 的 & 符号 


HTML & Cn 
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通过 @font-face 引入 本 地 字体 ， 
导致 这 些 字体 被 默认 应 用 到 整 自 
文本 上 


解决 方案 


我 们 真 的 可 以 用 为 一 种 字体 来 单独 美化 某 个 特定 字符 (或 是 菜 个 区 间 内 
的 多 个 字符 )， 但 其 过 程 可 能 没有 你 想像 中 那么 简单 明了 了 。 

我 们 通常 会 在 font-family 声明 中 同时 指定 多 个 字体 〈 即 字体 队列 )。 
这 样 ， 即 使 我 们 指定 的 最 优先 字体 不 可 用 ， 浏 览 锅 还 可 以 回 退 到 其 他 符合 整 
体 设计 风格 的 字体 。 但 是 ， 很 多 开发 者 部 忽略 了 一 点 : 这 个 机 制 对 单个 字符 
来 说 也 是 有 效 的 。 如 果 茶 款 字 体 可 用 ， 但 仅 包括 某 儿 个 字符 ， 那 它 就 只 会 用 
来 显示 这 几 个 字符 ;而 在 显示 其 他 字符 时 ， 浏 览 带 就 会 回 退 到 其 他 字体 。 这 
个 规则 对 本 地 字体 和 通过 @font -face 规则 引入 的 能 入 字体 都 是 有 效 的 。 


在 这 个 规则 之 下 ， 如 果 有 一 球 字 体 只 包含 一 个 字符 (你 肯定 猿 到 是 哪个 
了 吧 )， 那 这 于 字体 将 只 用 于 显示 这 个 字符 ， 其 他 字符 会 由 字体 队列 中 排 在 
第 二 位 、 第 三 位 或 更 后 面 的 字体 来 显示 。 因 此 ， 只 美化 & 符号 的 方法 就 浮 
出 水 面 了 : 创建 一 种 只 包含 多 字形 的 Web 字体 ， 通 过 @font-face 将 其 引 
入 网 页 ， 然 后 把 它 排 在 字体 队列 中 的 第 一 位 : 



































@font-face { 
font-family: Ampersand ; 
src: url("fonts/ampersand.woff"); 


} 


h1 { 
font-family: Ampersand, Helvetica, sans-serif; 


} 





这 个 方法 比较 灵活 ， 但 如 果 我 们 只 想 用 系统 内 建 字 体 中 的 某 一 款 来 美化 
义 伯 写 ， 这 个 方法 就 不 够 理想 了 : 不 仅 生 成 字体 文件 很 麻烦 ， 还 会 增加 一 个 
额外 的 HTTP 请 求 ， 如 果 你 看 中 的 这 款 字 体 不 允许 拆 解 使 用 ， 那 你 可 能 还 要 
面 对 版 权 上 的 问题 。 有 没有 一 种 办 法 可 以 用 本 地 字体 来 实现 这 种 效果 呢 ? 

你 可 能 已 经 了 解 @font-face 规则 中 的 src 描述 符 还 可 以 接受 local() 
函数 ， 用 于 指定 本 地 字体 的 名 称 。 因 此 ， 不 需要 用 到 任何 外 部 的 Web 字体 ， 
就 可 以 直接 在 字体 队列 中 指定 一 款 本 地 字体 : 




















@font-face { 
font-family: Ampersand; 
src: local('Baskerville'), 
local('Goudy 01d Style'), 
local( 'Garamond' ) ， 
local( 'Palatino'); 
} 


但 是 ， 如 果 你 想 马 上 试 试 Ampersand 字体 ， 会 发 现 整 段 文本 都 会 被 应 用 
为 我 们 指定 的 某 款 衬 线 字 体 〈 人 参见 图 5-20)， 因 为 这 些 字 体 本 身 涵 盖 了 这 上段 
文本 的 所 有 字符 。 不 过 这 并 不 表示 我 们 走 错 了 路 ， 只 是 表示 我 们 漏 了 一 步 没 
有 走 : 还 需要 一 个 描述 符 来 声明 我 们 想 用 这 几 蒜 本 地 字体 来 显示 哪些 字符 。 








这 个 描述 符 确实 是 存在 的 ， 叫 作 unicode-range。 


这 个 unicode-range 描述 符 只 在 @font-face 规则 内 部 生效 《因此 这 里 
用 了 描述 符 这 个 术语 ; 它 并 不 是 一 个 CSS 属性 )， 它 可 以 把 字体 作用 的 字符 
范围 限制 在 一 个 子 集 内 。 它 对 本 地 字体 和 远程 字体 都 是 有 将 的 。 某 些 智 能 的 
浏览 需 甚 至 可 以 做 到 当 网 页 中 的 所 有 字符 都 用 不 到 远程 字体 时 就 不 去 下 载 ! 


这 个 unicode-range 在 实践 中 非常 实用 ， 但 在 语法 上 却 非常 星 涩 。 它 
的 语法 是 基于 “Unicode 码 位 ”的 ， 而 不 是 基于 字符 的 字面 形态 。 因 此 ， 在 
使 用 之 前 ， 你 需要 查 出 你 想 指 定 的 这 些 字 符 的 十 六 进 制 码 位 。 有 不 少 网 上 工 
具 可 以 做 到 ， 你 也 可 以 在 控制 台 试 斌 下面 这 句 JavaScript 代码 : 














"&" .charCodeAt(86) .toString(16); // 返回 26 


这 样 你 就 得 到 了 字符 的 十 六 进 制 码 位 ， 然 后 需要 在 码 位 前 面 加 上 U+ 作 
为 前 缀 。 这 样 一 来 ， 我 们 终于 指定 了 一 个 字符 ! 以 & 符 写 为 例 ， 我 们 需要 
这 样 来 声明 : 


unicode-range: U+26; 


如 采 你 想 指定 一 个 字符 区 间 ， 还 是 要 加 上 Ut+ 前 级 ， 比 如 U+488-4FF。 
实际 上 对 于 这 个 区 间 来 说 ， 你 还 可 以 使 用 通配符 ， 以 这 样 的 方式 来 写 : 
U+4??。 同 时 指定 多 个 字符 或 多 个 区 间 也 是 允许 的 ， 把 它们 用 逗号 隔 开 即 可 ， 
比如 U+26， U+4??， U+2665-2676。 不 过 在 我 们 的 例子 中 ， 只 要 指定 单个 字 
符 就 足够 了 了。 我 们 的 代码 现在 变 为 : 











@font-face { 
font-family: Ampersand; 
src: local('Baskerville'), 
local('Goudy 01d Style'), 
local( 'Palatino'), 
local('Book Antiqua'); 
unicode-range: U+26; 


) 


h1 { 
font-family: Ampersand, Helvetica, sans-serif; 


} 


如 果 你 亲手 试 一 试 ( 结 果 参 见 图 5-21)， 就 会 发 现 我 们 终于 为 & 符号 应 
用 了 不 一 样 的 字体 ! 不 过 ， 这 个 结果 还 不 完全 是 我 们 所 期 望 的 。 图 5-19 中 
的 & 符号 是 用 Baskerville 字体 的 斜体 风格 来 显示 的 ， 因 为 一 般 来 说 ， 和 斜体 
的 衬 线 字 体 往 往 可 以 显示 出 更 美观 的 & 符号 。 我 们 并 不 是 在 对 & 符号 单独 
设置 样式 ， 那 么 该 如 何 把 它 设 为 斜体 呢 ? 

我 们 的 第 一 个 想法 可 能 是 在 @font-face 规则 中 使 用 font-style 描述 
符 。 不 过 这 并 不 会 产生 我 们 想 要 的 效果 。 它 只 不 过 是 告诉 浏览 右 只 在 斜体 
文本 中 使 用 这 些 字 体 。 因 此 ， 它 会 让 我 们 的 Ampersand 字体 被 完全 忽略 挥 ， 











@ 对 于 BMP ( Basic Multiling 


ual Plane， 基 本 多 文 种 平面 ) 
之 外 的 Unicode 字符 来 说 ， 
String#charCodeAt() 会 返回 错 
误 的 结果 。 不 过 我 们 日 常 需要 但 
询 的 99.9% 的 字符 应 该 都 在 这 
个 苑 围 之 内 。 如 果 你 得 到 的 结果 
在 D800~DFFF 区 间 之 内 ， 则 意 
味 着 这 个 字符 太 过 “超凡 脱俗 ”， 
最 好 换 用 一 个 靠 谱 的 网 上 工具 来 
查 出 它 的 真实 码 位 。 不 过 ES6 的 
String#codePointAt() 方法 已 经 
修复 了 这 个 问题 。 


HTML & CSS 


5-21 
昔 助 字体 队列 和 unicode-range 
描述 符 ， 我 们 给 & 符号 应 用 了 不 
同 的 字体 


除非 整个 标题 部 是 斜体 的 在 这 种 情况 下 ，& 符号 确实 会 显示 为 我 们 想 要 
的 样子 )。 


很 遗憾 ， 我 们 唯一 的 出 路 有 些 hack 的 味道 : 不 去 指定 字体 的 家 族 名 
(family name)， 而 是 直接 指定 字体 中 我 们 想 要 的 单个 风格 / 字 重 所 对 应 的 
“PostScript 名 称 ”"。 因 此 ， 为 了 指定 这 些 字体 的 斜体 版 本 ， 最 终 的 代码 会 








@font-face { 
font-family: Ampersand ; 
src: Local('Baskerville-Italic' )， 
local('GoudyOldStyleT-Italic'), 
local('Palatino-Italic'), 
local('BookAntiqua-Italic'); 
unicode-range: U+26; 


h1 { 
font-family: Ampersand, Helvetica, sans-serif; 


) 





最 终 ， 这 段 代码 完美 地 将 符号 显示 为 我 们 想 要 的 样式 ， 与 图 5-19 中 
的 效 末 如 出 一 辐 。 不 过 ， 如 有 果 我 们 想 进 一 步 对 它 的 样式 进行 日 定义 的 话 〈 比 
如 增加 大 字号 ， 改 变 透明 度 ， 等 等 )， 就 只 能 倒 回 到 修改 HTML 的 那 条 老 
路 了 。 当 然 ， 如 果 只 想 把 它 设置 为 不 同 的 字体 或 字体 中 特定 的 某 个 风格 / 字 
重 ， 那 这 个 技巧 堪 称 完美 。 你 还 可 以 举一反三 ， 用 不 同 的 字体 来 关 化 数字 、 
符号 、 标 点 等 。 各 种 创意 完全 停 不 下 来 ! 








S77 play.csssecrets.io/ampersands 


向 Drew McLellan (http://allinthehead.com) 脱 帆 致 效 ， 感 谢 他 提出 这 
个 效果 的 最 初版 本 (http://24ways.org/2011/creating-custom-font-stacks-with- 


unicode-range )。 





致敬 


四 CSS 字体 J 
相关 规范 
http://w3.org/ 工 R/css-fonts 








J 如果 要 在 Mac OS X 中 查 出 某 球 字体 的 “PostScript 名 称 ” 可 以 在 字体 篇 程序 中 选中 该 字 
体 ， 然 后 按 噶 。 








目 定 义 下 划 线 





CSS 渐变 ，background-sizetext-shadow, “条 纹 育 景 ” 





难 十 


设计 师 都 是 强迫 症 患者 。 这 群 人 总 是 不 和 遗 余力 地 打 麻 每 一 处 样式 ， 小 心 
到 性 地 调整 每 一 个 细节 ， 从 而 无 限 通 近 内 心 的 完美 约 稼 ， 力 求 整 个 设计 更 加 
符合 直觉 、 吻 于 使 用 。 他 们 很 少 拿 了 默认 值 就 用 。 


文本 的 下 划 线 就 是 一 件 让 设计 师 们 乐此不疲 反复 折腾 的 事情 。 尽 管束 认 
样式 很 实用 ， 但 往往 太 过 扎 眼 ， 更 不 要 提 在 不 同 浏览 器 下 的 演 染 效果 大 相 径 
庭 。 尽 管 文本 下 划 线 从 Web 诞生 之 初 束 已 经 存在 ， 但 我 们 其 实 并 没有 太 多 
办 法 对 它 进行 日 定义 。 哪 怕 是 在 CSS 降临 之 后 ， 也 只 给 了 我 们 一 个 简单 的 
明天 

















text-decoration: underline; 


跟 往 和 一 样 ， 如 果 手 里 缺少 想 要 的 工具 ， 我 们 就 会 想 尽 办 法 七 拼 八 姿 。 
我 们 没有 办 法 和 耻 接 定义 文本 下 划 线 的 样式 ， 就 会 很 日 然 地 打 起 边框 的 主意 。 
用 边框 来 模拟 下 划 线 ， 大 概 是 我 们 最 早 想 出 来 的 CSS 小 把 戏 之 一 了 


a[href] { 
border-bottom: 1px solid gray; 
text-decoration: none; 


) 


尽管 用 border-bottom SS A TT 线 “The only way to get 
宽 、 线 型 的 控制 能 力 ， 但 它 并 不 完美 。 我 们 在 图 5-22 中 可 以 看 出 ， 这 些 
下划线 ” 跟 文 本 之 间 的 空隙 很 大 ， 位 置 甚至 比 字 形 的 降 部 (descender) 还 
要 低 ! 我 们 可 以 试 着 修复 这 个 问题 ， 将 这 个 链接 的 display 属性 设置 为 ” to yleld to lt 
inline-block， 再 指定 一 个 稍 小 的 line-height， 就 像 这 样 : 图 5-22 
用 border-bottom 模拟 出 来 的 假 
下 划 线 








rid of a temptation 1s 





display: inline-block; 
border-bottom: 1px solid gray; 
line-height: .9; 


26 目 定 义 下 划 线 


“The only way to 


cet rid of a tempta- 
lion 


1s to yleld to lt 


5-23 
表面 上 修复 了 假 下 划 线 存在 的 问 
题 ， 但 遇 到 文本 换行 的 情况 时 ， 
灾难 降临 


“1 he only way to get 
rid of a temptation 1s 
to yield to lt 


5-24 
通过 CSS 渐变 精心 打造 的 自 定义 
下 划 线 


“he only way to get 
rid of a temptation 1s 
to yleld to lt 


5-25 
增加 text-shadow 来 防止 下 划 线 
穿 过 文本 的 降 音 


“1 he only way to get 
rid of a temptation 1s 
to yield to lt 


5-26 
通过 CSS 渐变 还 可 以 充分 自 定义 
下 划 线 的 线 型 


这 个 方法 确实 可 以 让 下 划 线 向 文本 贴近 ， 但 同时 会 阻止 正常 的 文本 换行 
行为 ， 如 图 5-23 所 示 。 有 眼下 ， 我 们 还 可 以 尝试 运用 一 层 内 骸 的 box-shadow 
来 模拟 下 划 线 的 效果 : 


box-shadow: 6 -1px gray inset; 


不 过 ， 这 个 方法 存在 与 border-bottonm 一 样 的 问题 ， 只 不 过 它 显 示 出 
We 还 有 没有 其 他 办 法 可 以 产生 即 美 观 又 灵活 ， 
而 且 可 以 定制 各 种 样式 的 下 划 线 呢 ? 





解决 方案 


最 佳 的 解决 方案 往往 出 自 最 意 想不到 的 地 方 。 在 这 个 例子 中 ， 最 佳 方案 
来 自 于 background-image 及 其 相关 属性 。 你 可 能 会 觉得 这 完全 不 可 思议 ， 
但 请 容 我 慢 慢 道 来 。 背 景 可 以 完美 地 跟随 换行 的 文本 ， 而 且 借 助 CSS 背景 
与 边框 〈 第 三 版 ) 中 与 背景 相关 的 新 属性 ， 我 们 已 经 拥有 了 细 粒 度 控制 背景 
的 能 力 。 我 们 甚至 不 需要 用 到 额外 的 HTTP 请 求 来 加 载 背 景 图 片 ， 因 为 可 以 
通过 CSS 渐变 来 凭空 生成 所 需 的 图 像 : 


























background: linear-gradient(gray, gray) no-repeat ; 
background-size: 166% 1px; 
background-position: 6 1.15em; 





你 可 以 在 图 5-24 中 看 到 它 的 效果 多 
一 点 改进 的 空间 。 


请 注意 下 划 线 会 穿 过 某 些 字母 〈 比 如 p 和 y) 的 降 部 。 如 果 下 划 线 在 过 
Rs 那 效果 看 起 来 岂 不 是 更 好 ? 假如 背景 是 一 片 实 
色 ， 就 可 以 设置 两 层 与 背景 色相 同 的 text-shadow 来 模拟 这 种 效果 (参见 
图 5-25 ) : 


么 优雅 和 和 柔和。 不 过 ， 我 们 仍然 有 

















background: linear-gradient(gray, gray) no-repeat ; 
background-size: 166% 1px; 

background-position: 6 1.15em; 

text-shadow: .65em 6 white, -.65em 6 white; 


使 用 渐变 来 实现 下 划 线 的 高 明之 处 在 于 ， 这 些 线条 极为 灵活 。 举 例 来 
说 ， 如 果 要 生成 一 条 虚线 下 划 线 (参见 图 5-26)， 可 以 这 样 做 : 


background: linear-gradient(98deg, 

gray 66%, transparent 6) repeat-x; 
background-size: .2em 2px; 
background-position: 6 1lem; 





QD 到 底 近 多 少 ? 只 不 过 
padding box ee 的 。 


近 了 线 宽 那 么 大 的 距离 ， 因 为 这 个 方法 唯一 的 区 别 在 于 线条 是 绘制 在 





然后 ， 就 可 以 通过 色 标 的 百分比 位 置 值 来 微调 虚线 的 虚实 比例 ， 还 可 以 
通过 background-size 来 改变 虚线 的 压 密 。 


play.csssecrets.io/underlines 


最 后 留 个 练习 给 你 。 试 试 生成 波 溪 型 的 下 划 线 ， 就 像 文本 编辑 天 在 高 亮 
拼写 错误 时 所 用 的 那 种 效 末 。《〈 提 示 ， 你 会 用 到 两 层 渐变 .) 在 下 面 的 “ 试 一 
试 ” 示 例 中 可 以 找到 解决 方案 ， 但 在 亲手 尝试 之 前 请 不 要 偷 看 答案 哦 ， 还 是 
目 己 动手 更 好 玩 ! 


play.csssecrets.io/wavy-underlines 


向 Marcin Wichary (http:/www.aresluna.org) 脱 蛋 致 赦 ， 感 谢 他 提出 
这 个 效果 的 最 初版 本 (http://medium.com/designing-medium/crafting-link- 
underlines-on-medium-7c03a9274f 9 )。 











致敬 


在 未 来 自 定 义 下 划 线 的 时 候 ， 我 们 册 也 不 需要 求助 于 这 些 带 有 hack 味道 的 方法 了 。 在 CSS 文本 装饰 ( 第 
三 版 ) ( http:/w3.org/TR/css-text-decor-3 ) 中 ， 针 对 这 个 需求 引入 了 一 些 新 属性 。 
text-decoration-color 用 于 自 定义 下 划 线 或 其 他 装饰 效果 的 颜色 。 
text-decoration-style 用 于 定义 装饰 效果 的 风格 ( 比如 实 线 、 虚 线 、 波 浪 线 等 )。 
text-decoration-skip 用 于 指定 是 否 避 让 空格 、 字 母 降 部 或 其 他 对 和 象 。 
text-underline-position 用 于 微调 下 划 线 的 具体 摆 放 位 置 。 
不 过 ， 目 前 这 些 属性 基本 上 还 没有 得 到 浏览 器 的 支持 。 


26 ” 自 定义 下 划 线 1 








图 5-27 

在 运用 这 些 效果 的 时 候 ， 会 很 容 
易 损伤 页 面 的 可 访问 性 ， 因 此 
干 万 不 要 忘记 测试 对 比 度 ， 以 确 
保 文本 内 容 的 可 谈 性 (在 这 方 
面 非常 实用 的 工具 是 leaverou. 
github.io/contrast-ratio， 因 为 它 
接受 所 有 合法 的 CSS 颜色 格式 ) 


现实 中 的 文字 效果 


基本 的 text-shadow 





难题 

在 网 页 中 ， 对 文字 进行 艺术 加 工 已 经 变 得 非常 普遍 了 ， 比 如 凸版 印刷 效 
果 ， 当 鼠标 悬 停 时 的 模糊 效果 ， 浮 雕 〈 伪 3D) 效果 ， 等 等 。 要 达成 这 些 效 
果 ， 我 们 往往 会 用 到 一 系列 精心 排列 的 文本 投影 ， 并 且 需 要 明白 我 们 的 眼睛 
是 如 何 工作 的 ， 因 为 这 些 手段 往往 建立 在 视 错觉 的 基础 上 。 一 旦 你 掌握 了 其 
中 的 穷 门 ， 就 可 以 很 容易 地 把 这 些 效果 画 出 来 ， 不 过 用 开发 工具 把 它们 写 出 
来 可 就 没 那么 容易 了 。 

本 篇 攻略 将 专门 讲解 如 何 创建 上 述 效果 ， 你 再 也 不 需要 一 边 挠 头 一 边 
间 :“ 这 个 效果 到 底 是 怎么 做 出 来 的 ? 


ratio 


hs1(210, 13%, 40%) EY hsic210, 13%, 75%) 


Passes AA for large text (above 





18pt or bold above 14pit) 





凸版 印刷 效果 


在 拟 物 化 风格 的 网 页 中 ， 凸 版 印刷 效果 是 最 流行 的 文学 美化 手法 之 一 。 
* 管 现在 拟 物化 的 设计 风格 已 经 不 像 以 前 那样 流行 了 ， 但 它 仍然 拥 有 忠实 的 
随 者 。 


这 种 效果 尤其 适用 于 中 等 忱 度 痛 景 配 上 诬 色 文字 的 场景 ; 但 它 也 可 用 于 
深 色 压 、 浅 色 子 的 场景 ， 只 要 文字 不 是 淡色 并 且 痛 景 不 是 纯 淡 或 纯 日 就 行 。 





、 


后 人 

















实际 上 ， 在 最 后 期 的 图 形 界 面 中 ， 为 按钮 生成 按 下 或 浮 起 效 末 就 用 到 了 
类 似 的 原理 : 出 现在 底部 的 浅 色 投 影 〈 或 者 出 现在 顶部 的 暗色 投影 ) 会 让 人 
产生 物体 是 目 进 平面 内 的 错觉 。 同 理 ， 出 现在 底部 的 上 暗色 投影 《或 者 出 现在 
顶部 的 浅 色 投影 ) 会 让 人 产生 物体 从 平面 上 串 起 的 错觉 。 这 种 方法 之 所 以 秀 
效 ， 是 因为 我 们 在 现实 世界 中 早已 习惯 了 光源 总 是 悬 在 头顶 。 在 这 样 的 环境 
里 ， 凸 起 物 的 下 方 会 产生 阴影 ， 而 凹陷 的 底部 边 绿 则 会 被 打 腕 。 


让 我 们 以 图 5-28 中 用 到 的 两 种 颜色 作为 起 点 。 图 中 文字 的 颜色 是 国 
hs1(216，13%，36%) ， 而 背景 色 是 于 hs1(21e，13%，66%) 。 


background: hs1(216，13%，662% ) ; 
color: hsl(21606, 13%,，306%); 





当 我 们 在 浅 色 背景 上 使 用 深 色 文字 时 比如 眼前 的 这 个 例子 )， 在 底部 
加 上 浅 色 投影 通常 效果 最 佳 。 到 底 要 多 浅 ， 取 决 于 你 用 的 是 什么 颜色 ， 以 及 








你 期 望 最 终 效 果 有 多 明显 ， 因 此 需要 反复 尝试 其 透明 上 度 以 达到 满意 效果 。 在 
这 个 例子 中 ， 我 们 最 终 敲 定 为 80% 不 透明 度 的 白色 : 当然 你 也 可 以 尝试 其 
他 数值 : 


background: hsl(2106, 13%, 606%); 
color: hsl(2106, 13%, 306%); 
text-shadow: 6 1px 1lpx hsla(06,06%,106006%, .8); 


在 图 5-28 中 可 以 看 到 最 终 效 来 。 在 这 个 例子 中 ， 我 们 用 的 是 像 系 单位 ， 
而 不 是 em 单位 。 不 过 如 打 需 要 处 理 的 文字 字号 足 度 非常 大 ， 那 么 em 单位 可 
能 更 合适 。 


text-shadow: 6 .63em .63em hs1a(6,6%,1665%，.8) | 





如 果 把 文字 和 背景 的 颜色 深 上 度 对 调 ， 样 式 看 起 来 又 会 如 何 呢 ? 在 深 色 
底 、 浅 色 文 字 的 情况 下 (参见 图 5-29)， 直 接 套 用 上 述 投影 样式 看 起 来 会 非 
常 柯 怪 ， 会 让 文字 显得 模糊 。 这 是 不 是 意味 看 我 们 无 法 在 这 种 场景 下 实现 凸 
版 印刷 效 采 呢 ? 不 是 ， 这 只 是 表明 我 们 应 该 调整 方法 。 在 这 种 情况 下 ， 给 文 
字 顶 部 加 深 色 投影 是 最 佳 方案 ， 效 果 如 图 5-30 所 示 。CSS 代码 看 起 来 是 这 
样 的 : 














background: hs1(216，13%，46% ) ; 
color: hs1(210，13%，75%) ; 
text-shadow: 6 -1px 1px black; 
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图 5-28 

对 浅 色 底 、 深 色 字 使 用 凸版 印刷 
效果 ( 上 图 : 加 效果 之 前 ， 下 图 : 
加 效果 之 后 ) 





图 5-29 

当 文字 比 背 景 的 颜色 浅 时 ， 直 接 
套用 上 述 样式 是 得 不 到 凸版 印刷 
效果 的 


aane onl, Way LO Se 
nd of a temptation 1s 


to vleld Dl 








图 5-30 

对 深 色 底 浅 色 字 使 用 凸版 印刷 效 
果 ( 上 图 : 加 效果 之 前 ， 下 图 : 
加 效果 之 后 ) 


27 ”现实 中 的 文字 效果 


COD 





图 5-31 
通过 text-shadow 的 扩张 效果 实 
现 的 真正 的 空心 字 


CD 


图 5- 
通过 重 靶 多 层 text-shadow 实现 
的 假 的 1px 描 边 





CD 
Be 


CHDD 


图 5-33 

由 多 层 少 量 偏 移 的 text-shadow 
生成 的 ( 极 不 自然 的 ) 3px 描 边 
效果 


CHD 








图 5-34 
使 用 SVG 来 实现 正常 的 粗 描 边 效果 
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空心 字 效 果 


在 未 来 ， 实 现 文字 描 边 或 空心 字 的 效果 会 非常 容易 ， 因 为 我 们 只 需要 使 
用 text-shadows 属性 的 扩张 参数 就 可 让 投影 变 大 ， 看 起 来 就 像 给 文字 勾 边 
了 一 样 。 这 个 道理 类 似 于 我 们 用 box-shadow 的 扩张 效果 来 模拟 块 级 元 素 的 
外 框 。 不 过 遗憾 的 是 ， 目 前 浏览 絮 对 这 个 参数 的 支持 还 极为 有 限 ， 因 此 我 们 
不 得 不 另 寻 它 法 来 模拟 文字 描 边 ， 这 些 方法 产生 的 结果 也 各 有 优 劣 。 

流传 最 广 的 方法 就 是 使 用 多 个 text-shadow， 分 别 为 这 些 投影 加 上 不 同 
方向 的 少量 偏 移 ， 就 像 这 样 〈 人 参见 图 5-32 ) : 








background: deeppink; 

color: white,; 

text-shadow: 1px 1px black, -1lpx -1px black, 
lpx -1lpx black, -1lpx 1lpx black; 


除 此 以 外 ， 还 可 以 重 冯 多 层 轻 微 模糊 的 投影 来 模拟 描 边 。 这 种 方法 不 需 
要 设置 仿 移 量 : 
text-shadow: 6 6 1px black, 8 6 1px black， 


0 6 1px black，6 6 1px black, 
0 6 1px black，6 6 1px black ; 





不 过 ， 这 种 方法 并 不 忆 是 可 以 得 到 完美 的 效 末 ， 而 且 性 能 消耗 较 高 。 没 
错 ， 这 是 因为 用 了 模糊 算法 。 
不 全 的 是 ， 我 们 需要 的 摘 
来 说 ， 我 们 可 以 试 试 3px 的 描 





边 越 粗 ， 这 两 种 方案 产生 的 结果 就 越 差 。 举 例 
边 会 糟糕 到 什么 程度 (参见 图 5-33 ) : 


background: deeppink; 

color: white; 

text-shadow: 3px 3px black, -3px -3px black, 
3px -3px black, -3px 3px black; 


不 过 别 乐 了， 我们 始终 拥有 SVG 这 个 终极 方案 ， 不 过 它 需 要 在 结构 代 
码 中 插入 很 多 乱 精 精 的 东西 。 比 如 次， 如 采 我 们 需要 在 一 级 标题 中 使 用 空心 
字 效 末 ， 那 HTML 代码 可 能 是 这 样 的 : 





<h1l><svg width="2em" height="1.2em"> 
<use xlink:href="#css" /> 
<text id="css" y="1lem">CSS</text> 
</svg></h1> 


然后 在 CSS 中 ， 我 们 需要 添加 以 下 代码 : 


h1 { 
font: 566%/1 Rockwell, serif; 
background: deeppink; 
color: white; 


} 


h1 text { 
fill: currentColor ; 


} 
h1 svg { overflow: visible } 


h1 use { 
stroke: black ; 
stroke-width: 6; 
stroke-linejoin: round; 


} 





显然 这 种 方案 也 不 够 理想 ， 但 它 的 视觉 效果 确实 是 最 好 的 (参见 图 
5-34) ; 甚至 在 那些 不 文 持 SVG 的 旧版 浏览 带 中 ， 这 些 文本 仍然 是 可 读 、 
可 设置 样式 的 ， 而 且 还 可 以 被 搜索 引擎 抓 取 。 
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文字 外 发 光 效 有 果 


在 某 些 类 型 的 网 站 中 ， 文 字 外 发 光 效 果 和 常用 于 凸显 标题 ， 或 给 链接 添加 
鼠标 悬 停 效 果 。 它 是 最 容易 生成 的 文字 美化 效果 之 一 。 这 种 方法 有 一 个 最 人 简 
单 的 版 本 : 你 只 需要 准备 几 层 重 共 的 text-shadow 即 可 ， 不 需要 考虑 偏 移 
量 ， 颜 色 也 只 需 跟 文 字 保 持 一 致 〈 人 参见 图 5-35 ) : 
































background: #263 ; 
color: #ffc; 
text-shadow: 0 6 .1lem, 68 6 .3em; 











如 打 是 为 鼠标 悬 停 状 态 请 加 这 种 效 末 ， 加 上 一 个 过 渡 效 果 台 更 好 了 了 : 


5-35 
a lt 使 用 两 层 简 单 的 text-shadow 实 


background: #203; 
color: white; 
transition: 1s; 


现 的 文字 外 发 光 效 果 


} 
a:hover { 

text-shadow: 6 6 .1em，6 6 .3em; 
} 








这 个 效 来 还 可 以 做 得 更 炫 。 如 打 你 在 :hover 状态 下 把 文字 本 号 隐藏 挥 ， 
那 它 看 起 来 真 的 就 像 在 慢 慢 变 模糊 (参见 图 5-36 ) : 











a { 
background: #203; 
color: white,; 
transition: 1s; 

y 


a:hover { 





5-36 
通过 隐藏 文字 、 只 显示 文字 投影 
实现 的 伪 模 糊 效 果 


color: transparent; 
text-shadow: 6 6 .lem white, 6 6 .3em white; 
) 


不 过 你 要 牢记 一 点 ， 依 赖 text-shadow 来 实现 文字 显示 的 做 法 无 法 实 
现 平 稳 退 化 : 如果 六 贤 各 不 文 持 text-shadow， 那 就 什么 字 也 看 不 见 了 。 因 
此 ， 知 要 确保 只 在 那些 支持 text-shadow 属性 的 环境 中 使 用 上 述 效 有 果 。 你 
也 可 以 换 种 思路 ， 使 用 CSS 滤 镜 来 实现 文字 的 模糊 效果 : 











al 
background: #203; 
color: White; 
transition: 1s; 


} 
a:hover f 
filter: blur(.1em); 





文 持 这 种 方法 的 浏 览 厅 可 能 要 少 一 些 ， 但 至 少 在 不 文 持 的 情况 下 不 会 有 
任何 功能 损失 。 








图 5-37 
通过 多 层 text-shadow 实现 的 文 
字 凸 起 效果 





5-38 
我 们 的 起 点 


文字 串 起 效果 


另 一 种 在 拟 物 化 风格 的 网 站 中 流行 〈 且 被 滥用 ) 的 效 末 是 文字 凸 起 〈 伪 
3D) 效果 《参见 图 5-37)。 这 其 中 的 主要 思路 就 是 使 用 一 长 串 累 加 的 投影 ， 
不 设 模糊 并 以 1px 的 跨度 逐渐 错开 ， 使 闫 色 偿 渐变 瞳 ， 然 后 在 抵 部 加 一 层 强 
烈 模 糊 的 瞳 投影 ， 从 而 模拟 完整 的 立体 效果 。 


5-38 中 的 文字 只 使 用 了 简单 的 CSS 代码 来 设置 样式 ， 我 们 以 它 作 为 
起 操 : 








background: #58a; 
color: white,; 


现在 给 它 添加 一 系列 逐渐 加 深 的 text-shadow: 


background: #58a; 

color: white,; 

text-shadow: 6 1px hs1(6,6%,85%) ， 
0 2px hs1(6,6%,862% ) ， 
8 3px hs1(6,6%,752% ) ， 
8 4px hs1(6,6%,762% ) ， 
9 5px hs1(6,6%,652% ) ; 


在 图 5-39 中 可 以 看 到 ， 效 果 已 经 出 来 了 ， 但 看 起 来 还 不 够 真实 。 信 不 
信 由 你 ， 我 们 距离 图 5-37 所 示 的 最 终 效 果 只 差 最 后 一 步 了 ， 那 就 是 在 底部 





加 一 层 投影 : 


background: #58a ; 

color: White; 

text-shadow: 6 1pXx hs1(6,62%,85% ) ， 
8 2px hs1(6,6%,，862% ) ， 





8 3px hs1(8,6%,75%) ， 5-39 
8 4px hs1(8,8X%,76%)， 已 经 十 分 接近 了 ， 但 看 起 来 还 不 
@ 5px hs1(6,6%,652% ) ， 够 真实 


2 
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这 种 繁琐 宛 长 的 代码 正 是 CSS 预 处 理 器 的 mixin 功能 所 要 解决 的 问题 。 
我 们 在 SCSS 中 可 以 这 样 来 做 : 


omixin text-3d($color: white, $depth: 5) { 
$shadows: (); 
$shadow-color: $color; 


@for $i from 1 through $depth { 
$shadow-color: darken($shadow-color, 106%); 
$shadows: append($shadows, 
© ($i * 1px) $shadow-color, comma); 


) 


color: $color ; 
text-shadow: append($shadows, 
© ($depth * 1px) 16px black, comma); 
} 


h1 { Qinclude text-3d(#eee, 4); } 





这 种 效果 还 有 很 多 变种 。 比 如 把 所 有 的 投影 痢 设 成 黑色 ， 并 且 去 挥 最 
压 层 的 投影 ， 就 可 以 模拟 出 一 种 在 复古 标志 夏 中 常见 的 文学 效果 (参见 图 
5-40 ) : 


color: white; 

background: hs1(6,56%,45% ) ; 

text-shadow: 1px 1px black, 2px 2px black, 
3px 3px black, 4px 4px black, 
Spx Spx black, 6px 6px black, 
7px 7px black, 8px 8px black; 





5-40 
复古 风格 的 排 印 效果 


把 这 些 代 码 转 换 成 mixin 甚至 比 前 面 的 例子 更 加 容易 ， 不 过 在 这 个 例子 
中 用 函数 来 组 织 代码 可 能 更 合适 : 


ofunction text-retro($color: black, $depth: 8) { 
$shadows: (1px 1px $color,); 


@for $i from 2 through $depth { 
$shadows: append($shadows, 
($i*+1lpx) ($i*1px) $color, comma); 
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由 


oreturn $shadows; 


} 
hi { 
color: white,; 
background: hs1(6,56%,45% ) ; 
text-shadow: text-retro(); 
} 


相关 规范 
http://Ww3.org/TR/css-text-decor 


基本 的 SVG 





难题 


虽然 不 是 非 第 典型 的 知 求 ， 但 有 时 我 们 确实 需要 让 一 个 短 句 沿 看 圆 形 的 
路 径 进 行 排列 。 当 这 个 需求 出 现 的 时 候 ，CSS 却 无 情 地 抛弃 了 我 们 。 还 没有 
任何 一 个 CSS 属性 或 特性 可 以 达成 这 个 效果 ， 我 们 所 能 想到 的 CSS 解决 方 
案 可 能 只 是 在 脑海 中 办 过 就 会 让 我 们 起 一 映 鸡皮 疙 奖 。 那 么 ， 有 没有 一 种 不 
依赖 图 上 的 方法 既 可 以 实现 这 种 文字 处 理 手法 ， 又 可 以 保全 我 们 的 神智 和 目 
哥 呢 ? 


解决 方案 


有 一 些 脚本 可 以 实现 这 个 效果 。 这 些 脚 本 需要 把 每 个 字母 包 庄 在 独立 的 
<span> 元 素 之 中 ， 然 后 把 各 个 字母 分 别 旋 转 ， 从 而 构成 一 个 环形 。 这 种 方 
式 不 仅 有 很 浓 的 hack 味道 ， 而 且 还 在 没有 正当 理由 的 情况 下 给 页 面 增加 了 
肥 肿 的 脚本 和 元 余 的 DOM 元 系 。 
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尽管 目前 还 没有 更 好 的 纯 CSS 实现 方法 ， 但 我 们 其 实 可 以 借助 一 点 内 
联 SVG 来 轻松 解决 这 个 难题 。SVG 原生 支持 以 任意 路 径 排队 的 文字 ， 而 圆 
形 只 不 过 是 一 种 特定 的 路 径 而 已 。 让 我 们 开始 动手 吧 ! 


在 SVG 中 ， 让 文本 按照 路 径 排 列 的 基本 方法 就 是 用 一 个 <textPath> 
元 素来 包 右 住 这 上 段 文本 ， 再 把 它们 装 进 一 个 <text> 元 素 中 。 这 个 
<textPath> 元 系 还 需要 在 它 的 ID 属性 中 引用 一 个 <path> 元 素 ， 然 后 就 可 
以 用 这 个 <path> 元 素来 定义 我 们 想 要 的 路 径 >。 在 内 联 SVG 内 部 的 文本 同 
样 可 以 继承 绝 大 多 数字 体 样式 (不 包括 line-height， 因 为 它 会 由 SVG 男 
行 指定 )， 因 此 我 们 完全 不 需要 担心 字体 问题 ， 就 像 处 理 外 部 的 SVG 图 像 时 
A 

假设 我 们 想 把 “circular reasoning works because” 这 人 句 话 设 定 为 环形 文 
字 ， 让 它 铺 满 整个 圆周 ， 如 图 5-42 所 示 。 首 先 需 要 在 HTML 元 厅 中 添加 一 
个 内 联 的 SYG， 并 用 一 个 路 径 来 定义 我 们 想 要 的 圆 形 : 

















<div class="circular"> 
<《SVg ViewBox="0 6 166 166 > 
<path d="M 6,506 a 56,506 6 1,1 6,1 z" 
id="cirecle”™ /> 
</Svg> 
</div> 


中 在 英语 中 ,“ 钮 扣 ” 和 “按钮 ”是 同一 个 词 (button)。 一 一 译 者 注 
@) 不 幸 的 是 ，<xtextPath> 只 能 和 <path> 元 素 配 合 使 用 ， 这 也 是 为 什么 我 们 没有 采用 可 读 性 更 
好 的 <circley 元 素来 生成 圆 形 。 
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在 juliancheal.co.uk 网 站 的 左 侧 ， 
那些 “ 钮 扣 ”" 就 运用 了 环形 文 
字 的 效果 。 请 注意 ， 环 形 文字 是 
唯一 不 会 打破 这 里 “ 钮 扣 ” 双 关 
语 的 设计 手法 ， 因 为 钮 扣 图 形 的 
中 心 已 经 被 孔 和 线 所 占据 了 
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5-42 
我 们 想 要 达成 的 最 终 目 标 








请 注意 我 们 是 用 viewBox 来 定义 它 的 单位 的 ， 而 不 是 用 width 和 
height 属性 。 这 允许 我 们 不 需要 指定 一 个 固定 的 尺寸 就 可 以 设置 坐标 系统 
和 图 形 的 宽 高 比 。 这 个 写法 不 仅 更 加 紧凑 ， 还 可 以 节省 几 行 CSS 代码 ， 因 
为 我 们 已 经 不 需要 对 这 个 <svg> 元 素 应 用 值 为 100% 的 宽度 和 高 度 了 : 它 自 
己 就 可 以 自动 地 适应 外 层 容器 的 尺寸 。 


如 采 你 没 看 公路 径 的 语法 ， 也 别 怀 疑 日 己 的 智商 ， 因 为 根本 没 人 能 
懂 。 即 使 中 的 有 人 费 尽 心思 领略 到 了 SVG 路 径 语 法 的 一 丝 神 秘 魅 力 ， 也 会 
在 几 分钟 内 忘 得 一 干 二 净 "。 如 果 你 还 是 很 好 奇 ， 那 我 就 来 讲解 一 下 这 串 神 
秘 代 码 所 包含 的 三 个 指令 。 

四 M 6,56: 移动 到 点 (8,56)。 


加 a 50,56 6 1,1 6,1: 以 当前 所 在 的 这 个 点 为 起 点 ， 以 当前 点 右 侧 0 
单位 、 下 方 1 单位 的 那个 点 为 终点 ， 男 一 段 圆 踊 。 这 上 段 圆 弧 的 水 平 
半径 和 垂直 半径 都 必须 是 50。 如 果 存 在 两 种 可 能 的 圆 弧度 数 ， 选 择 
度数 较 大 的 那 一 种 ; 同时， 如 果 存 在 两 种 可 能 的 圆 弧 方 向 ， 选 择 男 
在 这 两 个 点 右 侧 的 那 一 种 ， 而 不 是 左 侧 的 。 

加 z: 用 一 条 直线 线段 财 合 这 条 路 径 。 


到 目前 为 止 ， 我 们 的 路 径 还 只 是 一 个 黑色 的 圆 “〈 参 见 图 5-43)。 我 们 通 
过 <text> 和 <textPath> 元 素来 添加 文本 ， 并 通过 xlink:href 属性 来 把 它 
链接 到 这 个 圆 上 : 






































<div class= "Circular > 
<SVg ViewBox="0 6 166 166 > 
<path d="M 6,56 a 56,56 0 1,1 0,1 z" 
id="circle”" /> 





5-43 </svg> 
我 们 的 路 径 现 在 是 一 个 圆 ， 并 上 默 </div> 


认 填 上 了 黑色 








在 图 5-44 中 可 以 看 到 ， 人 尽管 在 视觉 效果 和 文本 可 读 性 方面 还 有 很 多 工 
作 要 做 ， 但 我 们 已 经 达成 了 茶 些 有 史 以 来 CSS 完全 无 法 企及 的 效 琳 ! 


接 下 来 的 一 步 ， 就 是 把 黑色 的 填充 效果 从 路 径 中 去 掉 。 在 任何 情况 下 
我 们 都 不 希望 这 个 同形 路 径 被 人 看 到 ; 我 们 只 希望 它 发 挥 一 个 基准 线 的 作 
用 ， 来 引导 这 段 文 本 。 有 很 多 方法 可 以 做 到 这 一 点 ， 比 如 把 它 般 套 进 一 个 
<defs> 元 素 中 该 元 系 就 是 专门 为 这 个 目的 而 设计 的 )。 不 过 ， 这 里 我 们 硕 
望 尺 可 能 减少 实现 这 个 效果 所 需 的 SVG 代码 量 ， 因 此 我 们 将 用 CSS 来 给 它 
应 用 一 个 fill: none 样式 : 























图 5-44 

尽管 还 有 很 多 事情 要 做 ， 但 我 们 _ 

已 经 达成 了 某 些 CSS 完全 无 法 做 ” 中 为 什么 SVG 路 径 的 语法 如 此 星 涩 ? 追溯 到 它 的 诞生 之 初 ， 大 家 都 坚信 没有 人 会 手工 编写 
到 的 效果 SVG 文件 ， 于 是 SVG 工作 组 为 了 减 小 文件 体积 ， 就 直 奔 最 紧凑 的 语法 去 了 。 


.circular path { fill: none; } 





现在 ， 这 个 黑色 圆 形 终于 看 不 抑 了 “人 参见 图 5-45)， 我 们 可 以 更 仔细 地 
人 研究 镜 下 的 问题 了 。 接 下 来 最 大 的 问题 是 ， 几 乎 所 有 的 文本 都 跑 到 SVG 元 
素 的 外 面 去 了 ， 而 且 齐 到 了 裁 切 。 为 了 修正 这 个 问题 ， 我 们 需要 让 这 个 容重 
元 素 变 小 ， 然 后 再 给 SVG 元 素 应 用 overflow: visible 样式 ， 这 样 它 就 不 
会 把 内 容 的 淤 出 部 分 裁 切 挥 了 : 











.Circular { 
width: 36em; 
height: 36em; 

) 


.Circular svg { 
display: block; 
overflow: visible; 


) 





你 可 以 在 图 5-46 中 看 到 结 末 。 请 注意 我 们 已 经 接近 目标 了 ， 但 仍然 有 
一 部 分 文本 是 被 裁 切 掉 的 。 原 因 在 于 SVG 元 素 只 会 基于 它 上 自己 的 尺寸 (而 
不 是 它 淤 出 的 内 容 〉 来 影响 布局 流 。 因 此 ， 即 使 有 一 些 文本 洪 出 到 了 这 个 
<svg> 元 系 创 建 的 方 框 之 外 ， 这 些 溢 出 部 分 也 不 会 把 SVG 元 素 上 自身 往 下 推 。 
我 们 需要 用 外 边 距 来 手工 处 理 一 下 : 











.Circular { 
width: 36em; 
height: 36em; 


l 


.Circular svg { 
display: block; 
overflow: visible; 


} 





这 就 成 了 ! 我 们 现在 得 到 的 效果 看 起 来 跟 图 5-42 一 模 一 样 ， 而 且 这 上段 
文本 在 可 访问 性 方面 也 是 完美 的 。 如 末 页 面 上 只 有 一 处 需要 用 到 环形 文字 
《比如 网 站 的 logo)， 那 我 们 就 可 以 收工 了 。 但 如 末 有 好 儿 处 都 需要 用 到 这 种 
效果 ， 那 我 们 肯定 不 想 把 SVG 代码 在 每 个 地 方 都 重复 一 次 。 为 了 避免 这 种 
重复 ， 我 们 可 以 写 一 小 段 脚 本 来 目 动 生成 必要 的 SVG 元 素 ， 而 结构 只 需要 
号 成 : 





<div class="circular"> 
circular reasoning works because 
</div> 





这 段 脚 本 会 遍历 所 有 设置 了 circular 类 的 元 素 ， 将 其 文本 内 容 删除 并 
保存 在 变量 中 ， 然 后 为 其 填 人 必要 的 SVG 元 系 : 
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图 5-45 
在 把 路 径 设置 为 不 可 见 之 后 ， 其 
他 问题 就 变 得 清晰 了 
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图 5-46 

上 图 : 对 容器 元 素 设 置 宽度 和 高 度 ; 
下 图 : 为 这 一 团 糟 设 置 overflow: 
visible 样式 


$$(' .circular').forEach(function(elL) { Js 
var NS = "http://www.w3.org/26800/svg"; 


var xlinkNS = "http://www.w3.org/1999/xlink"; 

var svg = document.createElementNS(NS, "svg"); 

var circle = document.createElementNS(NS, "path"); 

Var text = document.createElementNS(NS, "text"); 

Var textpath = document.createElementNS(NS, "textPath"); 
svg.setAttribute("viewBox", "60 6 166 1060"); 


circle.setAttribute("d", "M60,5060 a56,506 6 1,1 6,1z"); 
circle.setAttribute("id", "circle"); 


teXxtPath .textContent = el.textContent; 
textpath.setAttributeNS(xlinkNS, "xlink:href", "#circle"); 


text.appendChild(textPath); 
svg.appendChild(circle); 
svg.appendChild(text); 
el.textContent = "';，; 
el.appendChild(sveg); 


} 3 


et 


加 可 缩放 天 量 图 形 SVG 


http://w3.0rg/TR/SVG 














图 6-1 

CSS 2.1 提供 的 内 建 光 标 是 非常 
有 限 的 ( 这 坚 光 标 显 示 的 是 Mac 
系统 中 的 样式 ) 


第 6 章 用户 体 验 


选用 合适 的 鼠标 光标 


难 十 


鼠标 指针 的 用 途 不 仅 在 于 显示 鼠标 在 屏 才 上 的 位 置 ， 还 可 以 告诉 用 户 当 
前 可 以 执行 什么 动作 。 这 在 桌面 应 用 程序 中 是 十 分 普遍 的 用 户 体验 实践 ， 但 
在 网 页 应 用 中 却 往 往 被 忽视 。 


网 页 的 开发 者 并 不 是 唯一 要 对 此 负责 的 人 。 回 到 CSS 2.1 时 代 ， 我 们 
实际 上 并 不 能 充分 利用 系统 内 建 的 各 种 鼠标 光标 。 我 们 主要 通过 cursor 
属性 来 指定 光标 类 型 ， 比 如 pointer 光标 可 以 提示 某 个 元 素 是 可 点 击 
的 ， 而 help 光标 用 来 暗示 这 里 有 提示 信息 。 某 些 开 发 者 还 会 利用 wait 或 
progress 光标 来 蔡 代 或 配合 ) 一 个 加 载 提示 ， 但 是 仅 此 而 已 。 终 于 ， 在 
CSS 基本 UI 特性 〈 第 三 版 ) (http:/w3.org/TR/css3-ui/#eursor) 中 ， 我 们 获 
得 了 一 大 批 新 的 内 建 光 标 ， 只 不 过 大 多 数 开 发 者 还 沉浸 在 老 习 惯 当中 。 其 实 
用 户 体 验 的 优化 过 程 往往 就 是 这 样 的 : 在 得 到 解决 方案 之 前 ， 你 甚至 意识 不 
到 哪里 有 问题 。 让 我 们 与 时 俱 进 吧 ! 



































N 二 ? 中 
default crosshair help move 
ty, 六 名 
pointer progress text Wait 
e-resize ne-resize nw-resize n-resize 
¥ -4 ba 全 
se-resize swW-resize s-resize WwW-resize 


解决 方案 


图 6-2 完整 列 出 了 这 些 新 的 内 建 光 标 ， 你 还 可 以 在 规范 中 找到 它们 各 月 
的 用 途 。 不 过 你 应 该 看 得 出 来 ， 对 网 页 应 用 来 说 ， 并 不 是 每 个 新 光标 都 十 分 
第 用 。 举 个 例子 ， 这 里 面 甚至 包含 了 一 个 cell 光标 ， 它 用 于 提示 当前 位 置 
有 一 个 或 一 组 单元 格 可 以 被 选中 。 显 而 吻 见 ， 除 了 编辑 表格 或 网 格 ， 我 们 很 
少 会 遇 到 这 种 需求 。 

本 篇 攻略 的 目标 并 不 是 提供 一 篇 详尽 的 参考 资料 ， 把 所 有 这 些 新 光标 的 
适用 场景 一 网 打 尽 。 但 是 ， 这 其 中 的 茶 些 光标 很 突出 ， 因 为 只 需要 花费 极 少 
量 的 代码 ， 它 们 就 可 以 迅速 地 提升 大 量 网 页 应 用 的 可 用 性 。 



































图 6-2 
| CSS 基 本 UI 特性 ( 第 三 版 ) 
= PA ( http:/AWw3.org/TR/css3ui#—cursor ) 


中 的 新 一 批 内 建 光 标 ( 这 些 光标 


, 显示 的 是 Mac 系统 中 的 样式 
none context-menu cell vertical-text Ba 





alias copy no-drop not-allowed 


ew-resize ns-resize Nesw-resize nNnWwWse-resize 


Iy 二 中 忆 


col-resize row-resize all-scrol|l Zoom-in 


Q 


zoom-out 





图 6-3 
使 用 not-allowed 光标 来 提示 某 
个 控件 已 被 禁用 


1. 提示 禁用 状态 





是 not-allowed (参见 图 6-3)。 如 果 要 提示 某 个 控件 因为 某 些 原因 而 变 得 
无 法 交互 〈 即 控件 已 被 禁用 )， 用 这 个 光标 就 再 合适 不 过 了 。 尤 其 是 在 眼下 ， 
大 多 数 表单 都 已 经 被 过 度 美化 ， 要 清楚 地 表达 某 个 表单 控件 是 否 被 禁用 往往 
十 分 困难 ， 而 这 正 是 这 个 新 光标 的 用 武之 地 。 它 的 用 法 其 实 十 分 第 规 ， 就 像 
这 样 : 





:disabled, [disabled|], [aria-disabled="true"] { 
cursor: not-allowed; 


} 


© 如 果 你 在 视频 画面 上 隐藏 了 
鼠标 光标 ， 可 别 一 不 小 心 在 播放 
控件 区 域 也 把 光标 给 隐藏 了 ， 那 
样 的 话 你 可 就 是 好 心 办 坏事 了 。 


第 6 章 用户 体验 


2. 隐藏 鼠标 光标 


把 鼠标 光标 隐藏 起 来 听 起 来 简直 就 是 一 场 疆 梦 ， 不 是 吗 ?难道 真 的 会 有 
人 想 这 么 做 吗 ? 而 Web 标准 竟然 会 为 这 种 春 事 提供 便利 ?! 确实 有 一 些 人 
曾 在 这 方面 犯 过 严重 的 可 用 性 错误 ， 但 在 对 他 们 大 发 雷霆 之 前 ， 不 妨 回忆 一 
下 你 以 前 用 过 的 那些 可 怕 的 公共 触摸 屏 〈 比 如 公共 场所 的 信息 查询 台 ， 飞 机 
椅 背 上 的 娱乐 系统 )。 由 于 它们 的 开发 者 忘 了 隐藏 鼠标 光标 ， 导 致 屏幕 上 总 
会 有 个 禾 途 的 小 东西 挥 之 不 去 。 再 回想 一 下 ， 当 你 观看 视频 的 时 候 ， 往 往 会 
不 自觉 地 把 鼠标 移 到 屏幕 的 最 右 侧 ， 这 同样 是 因为 光标 碍 事 。 

这 样 看 来 ， 在 不 少 场景 下 ， 隐 藏 鼠标 光标 确实 能 带 来 可 用 性 的 提升 。 这 
就 是 为 什么 新 规范 会 引入 一 个 none 类 型 的 光标 。 在 CSS 2.1 中 ， 隐 藏 光标 
也 是 有 可 能 的 ， 但 需要 用 到 一 张 1x1 的 透明 GIF 图 片 ， 然 后 这 样 做 ; 











video { 
cursor: url(transparent.gif); 





现在 ， 我 们 再 也 不 需要 这 么 做 了 ， 因 为 可 以 直接 使 用 cursor: none。 
不 过 ， 还 是 有 必要 提供 一 个 回 退 方案 ， 因 为 旧版 浏览 右 可 能 还 不 认识 这 些 新 
的 光标 关键 字 。 我 们 可 以 利用 层 芭 机 制 来 实现 这 一 点 : 


cursor: url('transparent.gif'); 
cursor: none; 


加 CSS 基本 UI 特性 
http://w3.org/TR/css3-ui 相关 规范 





扩大 可 点 击 区 域 





难 匮 


如 果 对 用 户 体验 感 兴趣 ， 那 你 很 可 能 听 说 过 Fitts 法 则 。 它 是 由 美国 心 
理学 家 Paul Fitts 于 1954 年 首次 提出 的 。Fitts 法 则 认为 ， 人 类 移动 到 某 个 
目标 区 域 所 需 的 最 短 时 间 是 由 目标 距离 与 目标 宽度 之 比 所 构成 的 对 数 函 数 。 


D 
如 琳 要 用 数 竺 公式 把 它 表 达 出 来 ， 通 常 就 是 ，7 了 =a+blog,U+ 志 )。7T 表 未 
所 需 时 间 ，D 是 从 起 点 到 目标 中 心 的 距离 ， 玉 是 目标 区 域 的 宽度 ， 而 a 和 5。 


都 是 常数 。 

尽管 图 形 化 的 UI 在 当时 并 不 存在 ， 但 Fitts 法 则 仍然 完美 适用 于 指定 设 
备 ， 并 已 成 为 最 广为人知 的 人 机 交互 (Human-Computer Interaction，HCI ) 
原则 。 这 乍 听 起 来 可 能 有 些 令 人 和 意外， 但 别 筷 了 Fitts 法 则 与 人 类 的 运动 控 
制 能 力 更 加 相关 ， 而 非 局 限于 某 种 特定 便 件 。 


根据 这 个 公式 ， 我 们 可 以 很 容易 地 推导 出 : 日 标 越 大 ， 越 容易 到 达 。 因 
此 ， 对 于 那些 较 小 的 、 难 以 瞄准 的 控件 来 说 ， 如 末 不 能 把 它 的 视觉 大 寸 直接 
放大 ， 将 其 可 点 击 区 域 〈 热 区 ) 向 外 扩张 往往 也 可 以 市 来 可 用 性 的 提升 。 随 
着 触 屏 的 不 断 普 及 ， 这 一 点 变 得 愈 发 重要 。 没 有 人 愿意 对 一 个 狭小 的 按钮 学 
试点 按 很 多 次 ， 但 实际 上 这 样 的 无 条 之 举 仍 然 每 天 都 在 发 生 。 


还 有 一 些 时 候 ， 我 们 想 让 某 个 元 素 在 鼠标 接近 窗口 某 侧 时 上 自动 消 入 。 举 
个 例子 ， 一 个 自动 隐藏 的 页 头 会 在 鼠标 接近 时 自动 从 顶部 滑 人 并 完整 展现 ， 
这 也 涉及 【只 在 单一 方向 上 ) 放大 热 区 的 问题 。 只 借助 纯 CSS 可 以 做 到 这 
一 点 吗 ? 


























解决 方案 


假设 有 一 个 图 6-4 中 那样 的 简单 按钮 ， 我 们 想 将 其 热 区 在 四 个 方 回 
上 均 回 外 扩大 16px。 我 们 已 经 给 它 应 用 了 一 些 人 简单 的 样式 以 及 cursor: 
pointer， 它 既 可 以 为 鼠标 交互 提供 自 释 性 (affordance)"， 又 可 以 帮助 我 们 


J 在 可 用 性 领域 中 ,“ 自 释 性 ”是 控件 的 一 种 属性 ， 表 示 它 能 以 视觉 的 方式 来 提示 我 们 如 何 与 
之 进行 交互 。 举 例 来 说 ， 一 个 按钮 的 立体 感 暗示 着 它 可 以 被 按 下 ， 一 个 门 把 手 的 形状 就 在 引 
性 用户 去 拉动 或 旋 动 。 更 多 信息 请 参阅 en.wikipedia.org/wiki/Affordance。 至 于 鼠标 光标 的 变 
化 是 否 属于 一 种 日 释 性 或 是 视觉 反馈 ， 可 用 性 专家 内 部 还 存 有 争议 。 

















你 可 以 在 simonwallner.at/ 
ext/fitts 以 图 形 化 的 交互 方式 来 了 
解 Fitts 法 则 。 


@ 
》 


图 6-4 

按钮 最 初 的 样子 ， 图 中 的 两 种 状 
态 分 别 是 : 鼠标 光标 接近 按钮 边 
绿 时 ( 左 图 )， 鼠 标 光 标 移 动 到 按 
钮 的 范围 内 ( 右 图 ) 


30 扩大 可 总 击 区 域 
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6-5 
糟糕 ! 用 border 来 扩张 热 区 也 
会 让 我 们 的 按钮 跟着 变 大 
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用 了 background-clip 之 后 ， 按 
钮 的 尺寸 又 回归 正常 了 


© © 
yh 
图 6-7 


使 用 一 层 内 骸 box-shadow 来 模 
拟 出 边框 效果 





试探 它 的 热 区 到 搬 有 多 大 范围 。 

扩张 热 区 最 简单 的 办 法 是 为 它 设 置 一 圈 透 明 边 框 ， 因 为 鼠标 对 元 系 边 
框 的 交互 也 会 触发 展 标 事件 ， 这 一 点 是 描 边 和 投影 所 不 及 的 。 就 这 个 例子 而 
言 ， 把 元 素 的 热 区 在 四 个 方 加 上 各 加 外 扩大 18px 其 实 很 容易 做 到 : 











border: 16px solid transparent ; 





在 图 6-5 中 可 以 看 到 ， 歼 末 并 不 好 ， 因 为 它 同 时 让 按钮 变 大 了 ! 原因 在 
于 背景 在 默认 情况 下 会 曼 延 到 边框 的 下 层 。 人 简单 好 用 的 background-clip 
属性 可 以 把 背景 限制 在 原本 的 区 域 之 内 : 





border: 16px solid transparent ; 








在 图 6-6 中 可 以 看 到 ， 这 个 方法 很 管用 。 不 过 好 景 不 长 ， 当 你 需要 给 
按钮 加 上 真正 的 边框 效 采 时 ， 会 发 现 按 钮 仅 有 的 那 逢 边框 已 经 被 我 们 挪 作 
他 用 了 。 怎 么 办 ? 很 简单 ， 可 以 用 内 藤 投 影 来 模拟 出 一 道 〈 实 色 ) 边框 
(参见 图 6-7 ) : 


border: 16px solid transparent ; 





background-clip: padding-box; 


@) 和 
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如 果 和 再 给 按钮 加 一 道真 实 的 投影 
效果 ， 这 个 方法 的 局 限 就 显露 出 
来 了 


与 边框 不 同 的 是 ，box-shadow 可 以 同时 指定 多 层 投影 。 因 此 ， 如 果 你 真 
的 需要 多 层 投 影 ， 只 要 指定 多 个 由 逗号 分 隐 的 投影 即 可 。 但 如 果 把 内 极 投 影 和 
《常规 的 ) 外 部 投影 组 合 起 来 ， 将 会 得 到 一 个 怪异 的 效果 ， 因 为 外 部 投影 是 绘 
制 在 border box 外 部 的 。 比 如 ， 我 们 可 能 想 给 这 个 按钮 再 加 一 道真 实 的 模糊 化 
投影 ， 来 营造 一 种 “ 浮 出 表面 ”的 效果 〈 这 也 是 一 种 暗示 可 点 击 的 自 释 性 ) : 














box-shadow: 6 6 6 1px rgba(6,6,9,.3) inset， 
0 .1lem .2em -.05em rgba(6,0,6,.5); 


不 过 , 一旦 真 的 这 样 去 做 ， 就 会 发 现 结果 跟 我 们 的 期 望 大 相 径 隆 (参见 
6-8)。 这 个 解决 方案 在 其 他 方面 也 不 够 完美 : 边框 会 影响 布局 ， 而 且 在 某 些 
场景 下 我 们 可 能 根本 无 法 利用 边框 。 那 该 怎么 改进 呢 ? 我 们 放弃 边框 ， 然 后 改 
用 万 外 一 个 特性 来 实现 : 伪 元 素 同样 可 以 代表 其 宿主 元 素来 啊 应 鼠标 交互 。 


我 们 可 以 在 按钮 的 上 层 上 履 关 一 层 透 明 的 伪 元 素 ， 并 让 伪 元 素 在 四 个 方 回 
上 都 比 箱 主 元 系 大 出 16px: 














button { 
position: relative; 


WI 
} 


button: :before { 
content: "' 
position: absolute; 
top: -16px; right: -16px; 
bottom: -16px; left: -16px; 
} 


只 要 有 任何 一 个 伪 元 素 可 供 利 用 ， 这 个 方法 就 可 以 发 挥 作用 ， 也 不 会 干 
扰 其 他 任何 效果 。 这 个 基于 伪 元 素 的 解决 方案 极为 灵活 ， 我 们 基本 上 可 以 把 
热 区 设置 为 任何 想 要 的 尺寸 、 位 置 或 形状 ， 甚 至 可 以 脱离 元 素 原 有 的 位 置 ! 


play.csssecrets.io/hit-area 


相关 规范 
http://w3.o0org/TR/css-backgrounds 








难题 


设计 师 对 网 页 中 各 种 元 系 的 控制 欲 是 水 无 止境 的 。 当 CSS 经 验 不 足 的 





平面 设计 师 接 到 一 个 网 页 设计 任务 时 ， 他 几乎 一 定 会 为 各 种 表单 元 素 设 计 一 
套 上 自己 的 样式 ， 这 让 接 下 来 写 CSS 的 工程 师 感到 天 省 。 

当 CSS 最 初出 现时 ， 它 对 表单 元 系 的 样式 控制 力 是 极为 有 限 的 ， 而 且 
现在 仍然 没有 哪个 CSS 规范 明确 定义 了 这 方面 的 行为 。 不 过 这 些 年 来 ， 各 
种 浏览 带 已 经 在 逐步 放 开 CSS 属性 对 表单 控件 的 作用 范围 ， 从 而 允许 我 们 
设置 大 多 数 表单 控件 的 样式 。 
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目 定 义 复 选 杠 





尔 是 否 还 在 为 伪 类 选择 
符 :checked 和 属性 选择 符 
[checked] 之 间 的 区 别 感到 疑 
惑 ? 后 者 是 不 会 根据 用 户 的 交互 
行为 进行 更 新 的 ， 因 为 用 户 的 交 
互 并 不 会 影响 到 HTML 标签 上 的 
属性 。 


不 幸 的 是 ， 复 选 框 和 单 选 框 "不 在 此 列 。 直 到 今天 ， 这 两 种 控件 在 绝 大 
多 数 浏 览 硕 中 仍然 是 几乎 或 完全 无 法 设置 样式 的 。 这 最 终 导 致 网 页 开发 者 接 
受 默 认 样 式 ， 或 者 求助 于 一 些 糟糕 透 硕 、 可 访问 性 极 差 的 hack 方案 ， 比 如 
用 div 和 JavaScript 来 模拟 这 两 种 控件 。 


有 没有 一 种 方法 ， 婚 可 以 克服 这 些 限制 、 目 由 定制 复 选 框 的 外 观 ， 同 时 
又 可 以 摆脱 腕 肿 的 代码 、 保 全 结构 层 的 语义 和 可 访问 性 呢 ? 


解决 方案 


几 年 前 ， 这 个 任务 还 无 法 在 脱离 脚本 的 情况 下 完成 。 不 过 ， 在 选择 
符 ( 第 三 版 〉(http://w3.org/TR/css3-selectors〉 中， 我 们 得 到 了 一 个 新 的 伪 
类 :checked。 这 个 伪 类 只 在 复 选 框 被 勾 选 时 才 会 匹配 ， 不 论 这 个 勾 选 状态 
是 由 用 户 交 互 触发 ， 还 是 由 脚本 触发 。 

如 果 下 接 对 复 选 框 设置 样式 ， 那 么 这 个 伪 类 并 不 实用 ， 因 为 (前 面 已 经 
交待 过 了 ) 没有 多 少 样式 能 够 对 复 选 框 起 作用 。 不 过 ， 我 们 倒是 可 以 基于 复 
选 框 的 义 选 状态 借助 组 合 选 择 符 来 给 其 他 元 素 设置 样式 。 


你 可 能 还 没 明 白 ， 要 根据 复 选 框 的 勾 选 状态 来 给 哪个 元 素 设 置 样式 ?其 
实 有 一 个 元 素 总 是 跟 复 选 框 形影不离 、 息 息 相 关 ， 它 就 是 <label> (标签 元 
素 )。 当 “labe1> 元 素 与 复 选 框 关联 之 后 ， 也 可 以 起 到 触发 开关 的 作用 。 

由 于 label 不 是 复 选 框 那样 的 替换 元 素 2， 我 们 可 以 为 它 添加 生成 性 内 
容 〈 伪 元 素 )， 并 基于 复 选 框 的 状态 来 为 其 设置 样式 。 然 后 ， 就 可 以 把 真正 
的 复 选 框 隐 藏 起 来 (但 不 能 把 它 从 tab 键 切换 焦点 的 队列 中 完全 删除 )， 再 
把 生成 性 内 容 美 化 一 番 ， 用 来 顶替 原来 的 复 选 框 ! 


让 我 们 来 亲手 试 一 试 。 先 从 下 面 这 段 简单 的 结构 代码 开始 
































<input type="checkbox" id="awesome" /> 
<label for="awesome">Awesome!</label> 


接 下 来 需要 生成 一 个 伪 元 系 ， 作 为 美化 版 的 复 选 枉 。 我 们 匈 给 这 个 伪 元 
素 加 上 一 些 基 本 的 样式 











Q 为 易于 理解 ， 我 们 在 本 篇 攻略 中 统一 使 用 “ 复 选 框 ” 这 个 词 。 实 际 上 ， 除 非特 别 注 明 ， 本 节 
讨论 的 所 有 内 容 都 是 同时 适用 于 复 选 框 和 单 选 框 的 。 

@) 据 CSS 2.1 规范 所 述 :“ 蔡 换 元 素 的 特征 在 于 ， 其 内 容 超出 了 CSS 格式 化 模型 的 范畴 ， 比 如 
图 片 、 骨 入 的 文档 或 小 应 用 程序 等 。” 原 则 上 我 们 无 法 为 替换 元 素 添加 生成 性 内 容 ， 尽 管 某 
些 浏览 需 可 能 会 允许 这 样 做 。 

@@) 把 复 选 框 舱 套 进 label 中 同样 可 以 为 两 者 建立 关联 ， 还 可 以 省 掉 ID 属性 。 但 这 样 一 来 ， 我 
们 就 无 法 基于 复 选 框 的 状态 来 设置 label 的 样式 了 ， 因 为 现在 还 不 存在 父 元 素 选 择 符 。 

(4 在 这 些 例子 中 ， 我 们 给 复 选 框 添加 的 样式 是 相当 简单 的 ， 但 实际 的 可 能 性 是 无 穷 无 尽 的 。 你 
甚至 可 以 完全 跳 过 CSS 美化 这 一 招 ， 直 接 将 图 片 设 置 为 复 选 框 的 各 种 状态 ! 























input[type="checkbox"] + label::before { 
content: '\a6'; /* 不 换行 空格 */ 
display: inline-block; 


vertical-align: .2em; 
width: .8em; 

height: .8em; 
margin-right: .2em; 
border-radius: .2em; 


background: silver; 
text-indent: .15em; 
line-height: .65; 

} 


你 可 以 在 图 6-9 中 看 到 复 选 框 和 1abel 现在 的 样子 。 原 来 的 复 选 框 仍然 
是 可 见 的 ， 待 会 儿 我 们 会 将 其 隐藏 。 现 在 需要 给 复 选 框 的 勾 选 状态 加 上 不 同 
的 样式 。 样 式 可 以 很 侧 单 ， 比 如 换 种 颜色 ， 再 加 上 和 勾 选 标记 : 





input[type="checkbox"] :checked + label::before { 
content: '\2713'; 
background: yellowgreen,; 


} 





在 图 6-10 中 可 以 看 到 ， 这 个 伪 元 系 已 经 位 然 是 一 个 经 过 简单 美化 的 复 
选 伍 了 ， 而 且 功 能 完备 。 现 在 ， 我 们 需要 把 原来 的 复 选 框 以 一 种 不 损失 可 
访问 性 的 方式 隐 荐 起 来 。 这 意味 着 不 能 使 用 display: none， 因 为 那样 会 
把 它 从 键盘 tab 键 切换 焦点 的 队列 中 完全 删除 。 我 们 改 用 为 一 种 方法 来 达到 
日 的 : 











input[type="checkbox"] { 
position: absolute; 
clip: rect(6,06,06,0); 
} 


这 就 完成 了 ， 我 们 得 到 了 一 个 简单 定制 化 的 复 选 框 ! 我 们 还 可 以 进一步 
优化 ， 比 如 在 它 聚 焦 或 茶 用 时 改变 它 的 样式 《〈 歼 来 如 图 6-11 所 示 ): 








input[type="checkbox"]:focus + label::before { 
box-shadow: 8 6 .1em .1lem #58a; 
人 


input[type="checkbox"]:disabJled + label::before { 
background: gray; 
box-shadow: none; 
color: #555; 


上 





你 甚至 可 以 用 过 小 或 动画 来 让 各 个 状态 之 间 的 切换 更 加 平滑 ， 或 者 脑子 
一 热 创建 一 个 拟 物化 的 开关 。 这 方面 的 可 能 性 真 的 是 无 穷 无 尽 ”! 








JU 尽管 可 能 性 是 无 穷 无 尽 的 ， 但 仍然 要 避免 把 复 选 框 设 置 为 圆 形 : 绝 大 多 数 用 户 会 把 圆 形 的 开 
关 理 解 为 单 选 框 。 这 个 道理 也 适用 于 方形 的 单 选 框 。 


.| -Awesomel 
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左边 是 原生 复 选 框 ， 右 边 是 我 们 
经 过 初步 自 定义 的 复 选 框 


区 图 Awesomel 
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在 复 选 框 的 勾 选 状态 下 ， 伪 元 素 
也 需要 美化 一 香 


0 在 使 用 宽松 的 选择 符 时 一 


定 要 小 心 。 对 于 那些 后 面 没 有 
label 的 复 选 框 来 说 ( 比如 它 是 
被 能 套 进 一 个 label 的 )， 使 用 
input[type="checkbox"] 选择 符 
也 会 把 它们 隐藏 起 来 ， 从 而 损害 
可 用 性 。 


_JAwesomel 
国 AWesome!l 


剧 Awesomel 


图 6-11 
上 图 : 自 定 义 复 选 框 的 聚焦 状态 ; 
中 图 : 自 定义 复 选 框 被 禁用 的 状 
态 ; 下 图 : 自 定 义 复 选 框 被 勾 选 
的 状态 





致 租 


Awesomel 


AWwesomel 
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开关 式 按钮 的 两 种 状态 





7" play.csssecrets.io/checkboxes 


向 Ryan Seddon (http://thecssninja.com) 脱 幅 致 阁 ， 感 谢 他 最 先 提 
出 这 个 效果 。 这 个 技巧 现在 被 大 家 称 作 复 选 框 hack (http://thecssninja. 
com/css/custom-inputs-using-css )。 Ryan 曾 用 这 个 创意 实现 了 各 种 需要 保持 
状态 的 UI 组件 (http://labs.thecssninja.com/bootleg)， 比 如 模 态 对 话 框 、 下 
拉 菜 单 、 标 签 页 、 跑 马 灯 等 ， 不 过 像 这 样 滥用 复 选 框 很 容易 导致 可 访问 性 
上 的 问题 。 


开关 式 按 钮 

说 到 开关 式 按钮 ，HTML 并 没有 提供 一 种 原生 的 方式 来 生成 它 ， 但 我 们 
可 以 利用 “ 复 选 框 hack” 的 思路 来 模拟 它 。 开 关 式 按钮 与 复 选 框 的 行为 十 分 
相似 ， 可 以 用 来 切换 某 个 选项 的 开关 状态 ， 启 用 时 ， 它 是 被 按 下 的 状态 ， 停 


用 时 ， 它 就 是 浮 起 的 状态 。 在 语义 上 ， 开 关 式 按钮 和 复 选 框 并 没有 本 质 上 的 
差别 ， 因 此 可 以 放心 地 使 用 这 个 技巧 ， 不 用 担心 语义 上 有 问题 。 

如 果 想 用 这 个 技巧 来 生成 开关 式 按钮 ， 其 实 只 需要 把 label 设置 为 按钮 
的 样式 即 可 ， 并 不 需要 用 到 伪 元 素 。 上 有 具体 来 说 ， 要 生成 图 6-12 中 的 开关 式 
按钮 ， 代 码 可 以 这 样 与 : 











input[type="checkbox"] { 
position: absolute; 
clip: rect(6,06,06,06); 
) 


input[type="checkbox"] + label { 
display: inline-block ; 
padding: .3em .5em; 
background: #ccc; 
background-image: linear-gradient(#ddd, #bbb); 
border: 1px solid rgba(8,060,08, .2); 
border-radius: .3em; 
box-shadow: 6 1px white inset; 
text-align: center; 
text-shadow: 6 1px 1lpx white; 


} 


input[type="checkbox" |]:checked + label, 
input[type="checkbox"]:active + label { 
box-shadow: .65em .1em .2em rgba(8,06,06,.6) inset; 
border-color: rgba(6,0,0,.3); 
background: #bbb; 
) 











不 过 ， 在 使 用 开关 式 按 钮 时 仍 需 慎重 。 在 绝 大 多 数 场 景 下 ， 开 天 式 按钮 
对 可 用 性 有 负面 作用 ， 因 为 它们 很 容易 与 普通 按钮 混 消 ， 让 人 误 以 为 按 下 它 
会 触发 菏 个 动作 。 


play.csssecrets.io/toggle-buttons 


下 选择 符 半 
http://w3.org/TR/selectors 相 关 规 :已 
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RGBA 颜色 





难题 


很 多 时 候 ， 我 们 需要 通过 一 层 半 透明 的 遮 置 层 来 把 后 面 的 一 切 整体 调 
音 ， 以 便 凸 显 某 个 特定 的 UI 元素， 引导 用 户 关 注 。 比 如 ， 弹 出 层 〈 人 参见 图 
6-13) 以 及 交互 式 的 “快速 指南 ”就 是 这 种 效果 的 典型 案例 。 这 个 效果 最 常 
见 的 实现 方法 就 是 增加 一 个 额外 的 HTML 元 素 用 于 遮挡 背景 ， 然 后 为 它 添 
加 如 下 样式 : 


.OVerlay { /* 用 于 遮挡 背景 */ 

position: fixed; 

top: 08; 

right: 6; 

bottom: 6 ; 

left: 0; 

background: rgba(6,0,0,.8); 
} 


.lightbox { /* 需要 吸引 用 户 注意 的 元 素 */ 


position: absolute; 
z-index: 1; 


人 | 











.Over1lay 遮 章 层 负责 把 这 个 关键 元 素 背 后 的 所 有 东西 油 暗 。 .lightbox 
需要 指定 一 个 更 高 的 z-index， 以 便 绘制 在 让 日 层 的 上 层 。 这 个 方法 稳定 可 
靠 ， 但 需要 增加 一 个 额外 的 HTML 元素， 这 意味 着 该 效果 无 法 由 CSS 单独 
实现 。 这 不 是 一 个 很 严重 的 问题 ， 但 对 我 们 来 说 又 确实 是 个 麻烦 事 。 不 过 还 
好 ， 有 其 他 方法 可 以 摆脱 这 个 麻烦 。 














6-13 
Twitter 用 这 个 效果 来 实现 弹出 式 
对 话 框 





伪 元 素 方 案 





我 们 可 以 用 伪 元 又 来 消除 额外 的 HTML 元 系 ， 比 如 : 


body .dimmed: :before { 
position: fixed; 
top: 8; 
right: 6; 
bottom: ©; 
left: 6; 
z-index: 1; 
background: rgba(6,0,0,.8); 











这 个 办 法 确实 有 一 定 改 善 ， 因 为 我 们 可 以 直接 在 CSS 层面 使 用 这 个 歼 

果 了 。 不 过 问题 是 ， 这 个 方法 的 可 移植 性 还 不 够 好 ， 因 为 <body> 元 素 上 可 

能 有 其 他 需求 已 经 占用 了 : :before 伪 元 素 ; 而 且 在 使 用 这 个 效 采 时 ， 我 们 
往往 还 需要 一 点 JavaScript 来 给 <body>》 添加 dimmed 这 个 类 。 








如 果 把 遮 罩 层 交 给 这 个 元 素 自己 的 : :before 伪 元 素来 实现 ， 就 可 以 弥 
补 这 些 不 足 了 。 给 伪 元 素 设 置 z-index: -1; 就 可 以 让 它 出 现在 元 素 的 背 
后 。 人 尽管 这 解决 了 可 移植 性 的 问题 ， 但 无 法 对 庶 单 层 的 Z 轴 层次 进行 细 粒 度 
的 控制 。 它 可 能 会 出 现在 这 个 元 系 之 后 〈 这 是 我 们 期 望 的 )， 但 也 可 能 会 
现在 这 个 元 素 的 父 元 素 或 祖先 元 素 之 后 。 

这 个 方法 还 有 一 个 问题 ， 伪 元 素 无 法 绑 定 独立 的 JavaScript 事件 处 理 
函数 。 当 遮 量 层 是 由 一 个 独立 的 元 系 来 实现 时 ， 我 们 可 以 给 它 绑 定 事件 处 理 
国 数 ， 比 如 当 用 户 点 击 遮 时 层 时 目 动 关闭 弹出 层 。 当 使 用 弹出 层 目 己 的 伪 元 
系 来 实现 遮 章 层 时 ， 就 需要 判断 用 户 到 底 是 点 了 弹出 层 还 是 遮 瘟 层 ， 这 承 变 
得 相当 环 手 了 。 























box-shadow 方案 


上 上 述 伪 元 系 方 案 相 对 灵活 一 些 ， 通 篆 可 以 满足 绝 大 多 数 人 对 遮 鼻 层 的 期 
望 。 但 对 于 人 简单 的 应 用 场景 和 产品 原型 来 说 ， 我 们 可 以 利用 box-shadow 来 
达到 调 暗 背景 的 效果 : box-shadow 的 扩张 参数 可 以 把 元 系 的 投影 器 各 个 方 
癌 延 伸 放 大 。 具 体 做 法 就 是 生成 一 个 巨大 的 投影 ， 不 偏 移 也 不 模糊 ， 人 简单 而 
拙劣 地 模拟 出 谈 晶 层 的 效果 : 





box-shadow: 6 6 6 999px rgba(6,6,9,.8); 


这 个 初步 的 解决 方案 有 一 个 明显 的 问题 ， 就 是 它 无 法 在 较 大 的 屏幕 分 
辨 率 (>2000px) 下 正常 工作 。 我 们 要 么 加 大 数字 来 缓解 这 个 问题 ， 要 么 换 
用 视 口 单位 来 一 旁 永 逸 地 解决 它 ， 只 有 这 样 才 能 确保 “让 曾 层 ” 总 是 可 以 莉 
盖 〈 甚 至 超出 ) 视 口 。 因 为 我 们 无 法 分 开 指 定 水 平和 垂直 方向 上 的 扩张 半 
径 ， 所 以 此 处 最 合适 的 视 口 单位 是 vmax。 也 许 你 对 vmax 单位 还 不 熟悉 ， 这 
里 简单 介绍 一 下 : 1vmax 相当 于 1vw 和 1vh 两 者 中 的 较 大 值 。166vw 等 于 整 
个 视 口 的 宽度 ，1e6evh 就 是 视 口 的 高 度 。 因 此 ， 满 足 我 们 需求 的 最 小 值 就 是 
56vmax。 由 于 投影 是 同时 加 四 个 方 回 扩展 的 ， 这 个 遮 罩 层 的 最 终 尺 十 将 是 
166vmax 加 上 元 每 本 里 的 尺寸 。 























box-shadow: 6 6 6 50vmax rgba(86,9,9,， .8); 








这 个 技巧 非常 简洁 易 用 ， 但 它 存 在 两 个 非常 严重 的 问题 ， 从 而 制约 了 其 
使 用 场景 。 你 能 指出 这 两 个 问题 分 别 在 哪里 吗 ? 


第 一 ， 由 于 庶 旱 层 的 尺寸 是 与 视 口 相关 ， 而 不 是 与 页 面相 关 的 ， 当 我 们 
滚动 页 面 时 ， 遮 罩 层 的 边缘 就 露出 来 了 ， 除 非 给 它 加 上 position: fixed; 
这 个 样式 ， 或 者 页面 并 没有 长 到 需要 深 动 的 程度 。 此 外 ， 由 于 页 面 很 可 能 真 
的 很 长 ， 为 了 规避 这 个 缺陷 而 扩大 投影 的 扩张 半径 就 不 太 明 智 了 。 相 反 ， 我 
推荐 有 限度 地 应 用 这 个 技巧 ， 比 如 配合 固定 定位 来 使 用 ， 或 者 当 页 面 没 有 深 
动 条 时 再 用 。 














第 二 ， 当 使 用 一 个 独立 的 元 素 〈 或 伪 元 素 ) 来 实现 庶 单 层 时 ， 这 个 谈 单 
层 不 仪 可 以 从 视觉 上 把 用 户 的 注意 力 引 导 到 关键 元 系 上 ， 还 可 以 防止 用 户 的 
鼠标 与 页 面 的 其 他 部 分 发 生 交 互 ， 因 为 逛 午 层 会 捕获 所 有 指针 事件 。box- 
shadow 并 没有 这 种 能 力 ， 因 此 它 只 能 在 视觉 上 起 到 引导 注意 力 的 作用 ， 却 
无 法 阻止 鼠标 交互 。 这 一 点 是 否 可 以 接受 ， 取 决 于 你 的 具体 需求 。 








不 完全 支持 


backdrop 方案 


如 果 你 想 引 导 用 户 关 注 的 元 双 就 是 一 个 模 态 的 <dialog> 元 素 
(<dialog> 元 素 可 以 由 它 的 showModal() 方法 显示 出 来 )， 那 么 根据 浏览 
的 默认 样式 ， 它 会 自 带 一 个 遮 日 层 。 借 助 : :backdrop 伪 元 素 ， 这 个 原生 的 
遮 日 层 也 是 可 以 设置 样式 的 ， 比 如 可 以 把 它 变 得 更 暗 一 些 : 


dialog::backdrop { 
background: rgba(0, 6, 6, .8); 
} 


这 个 方法 唯一 需要 注意 的 地 方 在 于 ， 在 编写 本 书 时 ， 浏 览 器 对 它 的 支持 
还 极为 有 限 。 在 你 使 用 之 前 ， 需 要 确认 一 下 兼容 性 问题 。 不 过 请 记 住 ， 尽 管 
浏览 耸 还 不 文 持 它 ， 对 话 框 没有 遮 单 层 也 并 不 会 导致 任何 功能 缺失 ， 因 为 它 
只 是 一 种 用 户 体验 上 的 增强 手段 而 已 。 





人 


相关 规范 
http://w3.org/TR/css-values/#viewport-relative- 


lengths 


四 CSS 背景 与 边框 
http://w3.org/TR/css-backgrounds 


加 ”全屏 API 


http://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element 








通过 模糊 来 弱化 背景 


过 渡 动 男 ,，“ 毛 玻璃 效 采 ， “通过 阴影 来 弱化 到 景 - 





难题 


在 “通过 阴影 来 弱化 背景 ”中 ， 我 们 介绍 了 一 种 通过 半 透 明 巡 单 层 调 瞳 
并 弱化 页 面 背 景 的 方法 。 不 过 ， 如 来 背景 页 面 中 包含 很 多 内 容 的 话 ， 只 有 将 
其 调 到 很 瞳 的 程度 ， 才 能 为 背景 之 上 的 文本 提供 足够 的 对 比 度 ， 才 能 把 用 户 
的 注意 力 引 导 到 弹出 层 上 。 还 有 邦 外 一 种 更 加 优雅 的 方法 ， 就 是 把 关键 元 素 
之 外 的 一 切 部 模糊 挥 ， 用 来 配合 (或 取代 〉 阴 影 效 末 ， 如 图 6-14 所 示 。 这 
个 效 末 的 真实 感 更 强 ， 因 为 它 营造 出 了 “景深 效果 ”: 当 我 们 的 视线 聚焦 在 
距离 较 近 的 物体 上 时 ， 远 处 的 背景 就 是 虚 化 的 。 




















图 6-14 
x 游戏 网 站 polygon.com 就 是 一 个 
$ Polygon 生动 的 案例 ， 它 对 页 面 的 背景 癌 
LOGIN | slGNUP 分 作 了 模糊 处 理 ， 从 而 把 用 户 的 


注意 力 集中 到 对 话 杠 上 





不 过 ， 这 种 方法 的 实现 难度 也 更 高 。 在 滤 镜 效果 (http://w3.org/TR/ 





filter-effects) 出 现 之 前 ， 它 完全 是 不 可 能 完成 的 任务 ， 即 使 是 在 blur() 滤 
镜 出 现 之 后 ， 这 个 任务 仍然 是 非常 困难 的 。 如 果 我 们 想 对 除了 某 个 特定 元 素 
之 外 的 一 切 应 用 模糊 效果 ， 那 到 底 应 该 把 滤 镜 应 用 到 哪个 元 孙 上 呢 ? 如 有 果 把 
它 应 用 到 <body> 元 素 上 ， 页 面 中 的 所 有 元 系 都 会 被 模糊 处 理 ， 我 们 想 要 凸 
显 出 来 的 那个 关键 元 又 也 不 例外 。 这 跟 “ 毛 玻璃 效果 ”一 市 中 的 问题 韭 常 类 
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Bacon ipsum dolor sit amet consectetur short loin ut 


tri-tip alc )af in 
Pork. Elit bille ex 

. O HAlI, Pm a dialog. 
boudin p. tongue. 


Click on me to dismiss. 


Pork chol ialcatra 
cillum magna short nbs tempor. Pork Join do sint 


magna ea pork belly duis. Shoulder ullamco chicken 
porchetta, ham anim veniam venison. Fugiat 


tendlerlain venisan furcducken non nork chon riheve 


6-15 
一 个 朴素 的 对 话 框 ， 没 有 配备 用 
于 弱化 背景 的 遮 单 层 


Be wm 和 人 wm mm em 


| jp 一 
mA 1 
| O HAI, Pm a dialog. 
Click on me to dismiss. 


| [WE 
人 ve 


Pr 
mm MU -PP- 


6-16 
当 对话 框 显示 出 来 时 ,模糊 <main> 
元 素 


O HAI, Pm a dialog. 


Click on me to dismiss. 





6-17 
同时 应 用 模糊 效果 和 阴影 效果 ， 
两 者 都 是 由 CSS 滤 镜 来 实现 的 


O HAIL Pm a dialog. 


Click on me to dismiss. 





‘mag 4 purh bey enn Shemds 和 er clare 0 ch arm 
perenne ham seem ‘reerm ‘cn ope 
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6-18 

用 CSS 滤 简 来 实现 模糊 效果 ， 用 
box-shadow 来 实现 阴影 效果 ; 后 
者 还 可 以 起 到 回 退 的 作用 


似 ， 但 我 们 无 法 在 这 里 直接 套用 那里 的 解决 方案 ， 因 为 处 在 这 个 对 话 框 下 层 
的 可 能 是 任何 元 率 ， 而 不 一 定 只 有 一 张 育 景 图 片 。 那 我 们 该 怎么 办 ? 


解决 方案 


很 遗憾 ， 我 们 还 是 得 动用 一 个 额外 的 HTML 元 双 来 实现 这 个 效果 : 需 
要 把 页 面 上 除了 关键 元 系 之 外 的 一 切 都 包 库 起 来 ， 这 样 就 可 以 只 对 这 个 容 需 
元 素 进 行 模 糊 处 理 了 。xmainy> 元 系 在 这 里 是 极为 合适 的 ， 因 为 它 可 以 发 挥 
一 箭 双 雕 的 作用 : 把 页 面 中 的 主要 内 容 标 记 出 来 对话 框 通常 都 不 是 主要 内 
容 )， 同 时 还 给 了 我 们 添加 样式 的 钩子 。 结 构 代 码 基本 上 如 下 所 示 了?: 





<main>Bacon Ipsum dolor sit amet...</main> 
<dialog> 

O HAI, I'm a dialog. Click on me to dismiss. 
</dialog> 
<!-- 其 他 对 话 框 都 写 在 这 里 --> 


在 图 6-15 中 可 以 看 到 ， 它 并 没有 配备 遮 瘟 层 。 接 下 来 ， 每 当 弹 出 一 个 
对 话 框 ， 都 需要 给 <main> 元 系 增 加 一 个 类 ， 以 便 对 它 应 用 模糊 滤 镜 : 


main.de-emphasized { 
filter: blur(5px); 
) 


在 图 6-16 中 可 以 看 到 ， 这 已 经 是 一 个 巨大 的 进步 了 。 不 过 ， 现 在 这 个 
模糊 效 末 是 突然 出 现 的 ， 看 起 来 不 是 那么 卓然 ， 反而 给 人 一 种 突 无 的 感觉。 
由 于 CSS 滤 镜 是 可 以 设置 动画 的 ， 我 们 可 以 让 页 面 背 景 的 模糊 过 程 以 过 渡 
动 男 的 形式 来 呈现 。 


main { 


transition: .6s filter; 


} 


main.de-emphasized { 
filter: blur(5px); 
} 


如 果 能 把 这 两 种 弱化 背景 的 手法 〈 阴 影 和 模糊 ) 结合 起 来 ， 那 就 更 好 
了 。 有 一 种 实现 方法 就 是 使 用 brightness() 和 /或 contrast() 滤 镜 : 


main.de-emphasized { 
filter: blur(3px) contrast(.8) brightness(.8); 


} 


我 们 可 以 在 图 6-17 中 看 到 效果 。 通 过 CSS 滤 镜 产生 阴影 效果 ， 意 味 
着 一 旦 滤 镜 不 被 支持 ， 我 们 将 没有 任何 回 退 方案 。 因 此 ， 不 妨 换 用 其 他 方 


QD 我 们 假设 所 有 <dialog> 元 素 在 初始 状态 下 都 是 隐藏 的 ， 而 且 同 一 时 刻 最 多 只 会 出 现 一 个 。 


法 (比如 ， 前 一 篇 攻略 提 到 的 box-shadow 方 案 ) 来 实现 阴影 效果 ， 从 而 起 
到 回 退 样式 的 作用 。 这 个 方法 还 可 以 避免 在 图 6-17 边缘 处 出 现 的 “ 光 坚 歼 
应 ”。 在 图 6-18 中 ， 我 们 用 一 层 投影 来 实现 调 瞳 背景 的 效果 ， 光 尝 的 问题 就 
不 复 存 在 了 。 


play.csssecrets.io/deemphasizing-blur 


向 Hakim El Hattab (http:/hakim se) 脱 帽 致敬， 感谢 他 提出 了 一 个 
类 似 的 效果 (http://lab.hakim.se/averund)。 另 外 ， 在 Hakim 的 实现 中 ， 页 
面 背 景 还 会 通过 scale() 变形 属性 来 产生 缩小 效果 ， 从 而 进一步 增强 景 








深 效 果 ， 让 我 们 感觉 对 话 框 真 的 离 我 们 更 近 了 。 致 敬 


可 滤 镜 效果 轴 
http://w3.org/TR/filter-effects 相关 规范 


四 CSS 过 渡 
http://w3.org/TR/css-transitions 





$4 





Ada Catlace 
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CSS 渐变 ，background-size TIm Purrners-Lee 
WebkKitty 
LT 
难题 图 6-19 


a 、 a | 、 ”这 个 容器 内 包含 了 很 多 内 容 ， 是 
深 动 条 是 一 种 常见 的 界面 控件 ， 用 来 提示 一 个 元 素 除 了 可 以 看 到 的 内 容 。 二 jy 滚动 的 ， 但 如 果 不 跟 它 交互 ， 


之 外 ， 还 包含 了 更 多 内 容 。 但 是 ， 它 往往 太 过 笨重 ， 在 视觉 上 喧 宾 夺 主 ， 你 就 不 会 知道 
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6-20 

Google Reader 提出 了 一 种 优雅 
的 用 户 体 验 模式 ， 它 可 以 提示 侧 
边栏 需要 滚动 才能 看 到 完整 的 内 
容 。 左 图 : 滚动 到 最 顶部 时 ， 中 
图 : 滚动 到 列表 的 中 间 位 置 时 | 
右 图 : 滚动 到 最 底部 时 











此 现代 操作 系统 已 经 开始 简化 它 的 外 观 ， 当 用 户 不 与 可 滚动 的 元 素 交 互 时 ， 
滚动 条 就 会 被 完全 隐藏 。 

尽管 我 们 现在 已 经 很 少 通 过 滚动 条 来 滚动 页 面 了 了 《〈 更 多 的 是 使 用 触 措 手 
势 )， 但 深 动 条 对 于 元 素 内 容 可 滚动 的 提示 作用 仍然 是 十 分 有 用 的 ， 哪 怕 对 
于 那些 没有 发 生 交 互 的 元 素 也 是 如 此 ;， 而且 这 种 提示 方式 十 分 巧妙 。 

Google Reader 是 一 球 由 Google 推出 的 RSS 阅读 大 〈 现 已 下 线 )， 它 的 
用 户 体验 设计 师 找 到 了 一 种 非常 优雅 的 方式 来 作出 类 似 的 提示 : 当 侧 边栏 的 
容 需 还 有 更 多 内 容 时 ， 一 层 淡淡 的 阴影 会 出 现在 容 硕 的 项 部 和 /或 底部 《人参 
见 图 6-20 )。 
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不 过 Google Reader 为 了 实现 这 个 效果 用 到 了 大 量 的 脚本 。 这 真 的 有 必 
要 吗 ? 我 们 能 否 用 纯 CSS 实现 相同 的 效果 ? 


解决 方案 


让 我 们 首先 从 一 段位 单 的 结构 代码 开始 ， 一 个 市 有 示意 性 内 容 〈 都 是 一 
些 极 客 范 的 猫 名 ) 的 普通 无 序列 表 : 





<Ul> 
<l1i>Ada Catlace</l1i> 
<l1i>Alan Purring</1i> 
<li>Schrédingcat</1i> 
<1i>Tim Purrners-Lee</1i> 
<li>webKitty</1i> 
<1i>Json</1i> 
<1i>Void</1i> 
<1i>Neko</1i> 
<1i>NaN</1i> 
<1i>Cat5</1i> 
<1i>Vector</1i> 

</ul> 








我 们 可 以 给 <ul> 元 素 设 置 一 些 基 本 的 样式 ， 让 它 的 高 度 略 短 于 内 容 ， 
从 而 让 其 内 容 可 以 滚动 : 


overflow: auto ; 

width: 16em; 

height: 8em; 

padding: .3em .5em; 
border: 1px solid silver; 








接 下 来 ， 有 趣 的 事情 即将 发 生 。 我 们 用 一 个 径 辐 渐变 在 顶部 添加 一 条 
阴影 : 





background: radial-gradient(at top，rgba(6,0,90,.2)， 
transparent 76%) no-repeat; 
background-size: 166% 15px; 


你 可 以 在 图 6-21 中 看 到 结 采 。 现 在 ， 当 我 们 滚动 列表 时 ， 这 条 阴影 会 
一 直 停留 在 相同 的 位 置 。 这 正 是 背景 图 像 的 默认 行为 它 的 位 置 是 相对 于 元 
系 回 定 的， 不 论 元 系 的 内 容 是 否 发 生 了 滚动 。 这 一 点 也 适用 于 background- 
attachment: fixed 的 背景 网 像 。 它 们 唯一 的 区 别 是 ， 当 页 面 滚动 时 ， 后 者 
是 相对 于 视 口 固定 的 。 有 没有 办 法 让 背景 图 像 跟 着 元 素 的 内 容 一 起 滚动 呢 ? 

在 几 年 以 前 ， 这 件 看 似 徐 单 的 小 事 还 是 不 可 能 完成 的 任务 。 由 于 这 个 问 
题 非 常 突 出 ， 背 景 与 边框 《第 三 版 ) (http:/w3.ore/TR/css3backsground/ 林 local0 ) 
为 background-attachment 属性 增加 了 一 个 新 的 关键 字 ， 叫 作 local。 


不 过 background-attachment: local 并 不 能 立 等 见 影 地 解决 我 们 眼前 
的 这 个 需求 。 如 果 应 用 到 这 条 阴影 上 ， 它 会 市 给 我 们 正好 相反 的 效果 : 当 我 
们 滚动 到 最 顶端 时 ， 能 看 到 一 条 阴影 ;但 当 我 们 辐 下 滚动 时 ， 这 条 阴影 承 消 
失 了 。 方 同 明确 了 ， 但 我 们 还 得 绕 一 点 路 。 

问题 的 答案 是 我 们 需要 两 层 背 景 : 一 层 用 来 生成 那 条 阴影 ， 男 一 层 基 本 
上 就 是 一 个 用 来 遮挡 阴影 的 白色 矩形， 其 作用 类 似 于 遮 午 层 。 生 成 阴影 的 那 
层 背 景 将 具有 默认 的 background-attachment 值 (scrol11)， 因 为 我 们 希望 
它 总 是 保持 在 原 位 。 我 们 把 遮 潮 背景 的 background-attachment 属性 设置 
为 1ocal， 这 样 它 就 会 在 我 们 滚动 到 最 顶部 时 盖 住 阴影 ， 在 加 下 滚动 时 跟着 
滚 劲 ， 从 而 露出 阴影 。 


我 们 会 用 一 道 线性 浙 变 来 生成 这 个 矩形 的 遮 瘟 ， 并 让 它 的 颜色 与 容 从 的 
育 景 色 保 持 一 致 〈《 这 里 是 日 色 ) : 
































background: linear-gradient(white, white), 
radial-gradient(at top，rgba(6,0,9,.2)， 
transparent 76% ) ; 
background-repeat: no-repeat; 
background-size: 166% 15px; 
background-attachment: local, scroll; 


Ada Catlace 
Alan Purring 
Schrodingcat 
TIm Purrners-Lee 
WebkKitty 


6-21 
项 部 的 阴影 


6-22 

在 滚动 的 不 同 阶 段 ， 两 层 背 景 的 
效果 。 左 图 : 滚动 到 最 顶部 时 | 
中 图 : 往 下 滚动 一 点 时 ， 右 图 : 
往 下 滚动 很 长 距离 时 


6-23 

为 了 阴影 实现 平滑 淡出 效果 ， 我 
们 首先 尝试 使 用 一 道 从 white 到 
transparent 的 渐变 作为 遮 罩 


在 图 6-22 中 可 以 看 到 在 不 同 的 滚动 距离 下 ， 效 果 分 别 是 什么 样子 的 。 
这 好 像 已 经 达到 我 们 想 要 的 效果 了 ， 但 还 有 一 个 很 大 的 缺点 ， 当 我 们 只 是 滚 
动 了 一点 距离 时 ， 阴 影 露 出 的 方式 非常 生硬 和 突 元 。 有 没有 办 法 让 它 变 得 平 
滑 一 些 ? 
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Ada Catlace Alan Purring 
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Alan Purring Schrodingcat 


Schrodingcat 


Schrodingcat TIm Purrners-Lee 


TIm Purrners-Lee 


TIm Purrners-Lee WebkKitty 
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Ada Catlace Ada Catlace Alan Purring 
Alan Purring Alan Purring Schrodingcat 


schrodingcat Tim Purrners-Lee 


WebkKitty 


Schrodingcat 
TIm Purrners-Lee 


Ci WebkKitty 


别 忘 了 我 们 的 “ 遮 章 层 ” 是 一 层 〈 逐 渐 淡 化 的 ) 线性 渐变 ， 只 要 把 它 修改 
为 一 段 从 white 到 透明 白色 (hs1a(8,8%,186%,8) 或 rgba(255,255,255,6)) 
的 真正 的 渐变 图 和 案 ， 就 可 以 让 阴影 的 显现 过 程 变 得 平滑 : 


TIm Purrners-Lee 


IcAan 





background: linear-gradient(white, hsla(8,68%,10606%,0)), 
radial-gradient(at top，rgba(6,0,9,，.2)， 
transparent 76% ) ; 


我 们 的 路 没有 走 错 。 在 图 6-23 中 可 以 看 到 ， 它 可 以 逐渐 地 露出 阴影 ， 
就 像 我 们 期 望 的 那样 。 不 过 ， 它 仍然 有 一 个 严重 的 缺陷 : 当 我 们 滚动 到 最 顶 
部 的 时 候 ， 这 个 “ 庶 日 层 ” 再 也 无 法 完整 地 庶 住 阴影 了 。 这 个 问题 也 是 可 以 
解决 的 ， 我 们 只 要 把 white 色 标 加 下 移动 一 点 《精确 地 说 是 15px， 与 阴影 
的 高 度 相等 )， 就 可 以 在 淡化 区 域 之 前 插入 一 段 日 色 的 实 色 区 域 。 此 外 ， 我 
们 还 需要 把 让 日 层 的 尺寸 增 大 ， 超 过 阴影 的 尺寸 ， 否 则 这 个 庶 晶 层 就 没有 由 

















QD 为 什么 用 透明 白色 ， 而 不 是 直接 用 transparent ? 后 者 其 实 是 rgba(8,6,6,6) 的 别名 ， 
为 渐变 是 从 晶 色 实 色 到 透明 黑色 进行 过 渡 的 ， 所 以 渐变 过 程 中 可 能 会 出 现 灰 色色 调 。 如 果 浏 
览 器 按照 规范 的 要 求 以 一 种 叫 作 “ 预 乘 RGBA 空间 ”(premultiplied RGBA space) 的 算法 进 
行 颜色 的 插值 计算 ， 这 种 情况 是 不 会 发 生 的 。 各 种 插值 算法 的 具体 细节 已 经 超出 了 本 书 的 范 
畴 ， 但 网 上 有 很 多 相关 的 资料 可 以 参考 。 





这 到 浅 的 源 变 区 域 了 。 实 际 的 高 度 值 取决 于 我 们 想 要 的 平 请 度 〈 就 是 在 滚动 
过 程 中 阴影 淡 入 淡出 的 速度 )。 经 过 一 番 试 验 之 后 ，58px 似乎 是 一 个 合理 的 
数值 。 最 终 的 代码 如 下 所 示 ， 我 们 可 以 在 图 6-24 中 看 到 它 的 效 采 : 





| yy 图 6-24 
Ada Catlace 0 Alan Purring 最 终 效果 
Alan Purring Alan Furiineg Schrodingcat 


Chrodlngeat TIm Purrners-Lee 


WebkKitty 


Schrodingcat 
TIm Purrners-Lee 


WebkKitty 


TIm Purrners-Lee 



































| A/ahKittv | | | lcAnNn J」 





background: linear-gradient(white 36%, transparent), 
radial-gradient(at 56% 606, rgba(8,06,0,.2), 
transparent 76% ) ; 
background-repeat: no-repeat ; 
background-size: 166% 56px, 166% 15px; 
background-attachment: local, scroll; 


当然 ， 为 了 完整 地 实现 这 个 效 末 ， 我 们 还 需要 再 用 两 层 渐变 来 实现 底部 
的 阴影 和 它 配套 的 遮 站 ， 但 逻辑 是 完全 一 致 的 。 就 把 这 作为 留 给 你 的 练习 吧 
(你 也 可 以 在 下 面 的 “ 试 一 试 ” 页 面 中 偷 看 答案 )。 


play.csssecrets.io/scrolling-hints 


向 Roman Komarov (http://kizu.ru/en) 脱 帆 致 阁 ， 感 谢 他 提出 这 个 效 
果 的 一 个 早期 版 本 《http://kizu.ru/en/fun/shadowscroll)。 他 的 版 本 采用 了 伪 
元 素 和 定位 ， 而 没有 使 用 背景 图 像 。 在 菜 些 场 景 下 这 可 能 是 个 不 错 的 备 选 
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致 敬 


四 CSS 背景 与 边框 半 
http://w3.org/TR/css-backgrounds 相关 规范 


四 CSS 图 像 
http://w3.0org/TR/css-images 
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第 6 章 ， 用户 体验 


交互 式 的 图 片 对 比 控件 





难题 
有 时 ， 我 们 需要 展示 两 张 图 片 的 外 观 差异 ， 通 沼 是 “之 前 和 之 后 ”形式 
的 对 比 。 例 如 ， 照 片 在 经 过 一 系列 操作 前 后 的 对 比 效 末 ， 美 容 网 站 上 茶 种 护 


肤 疗 法 前 后 的 对 比 效 末 ， 某 个 地 区 在 灾难 事件 前 后 的 现场 对 比 结 


最 和 见 的 解决 方案 就 是 把 两 张 岁 记 并 排放 置 。 不 过 在 这 种 情况 下 ， 人 眼 
只 能 观察 到 非 肖 明显 的 差 寞 ， 从 而 忽略 挥 相对 细小 的 区 别 。 如 朵 对 比 的 意图 
并 不 强烈 ， 或 者 图 片 的 差异 已 经 足够 明显 ， 这 个 方法 基本 上 也 可 以 胜任 ; 但 
在 其 他 场景 下 ， 我 们 就 要 找到 更 有 表现 力 的 展示 手法 。 


从 用 户 体验 的 角度 来 看 ， 这 个 问题 可 以 有 很 多 解决 方案 。 比 如 说 ， 我 们 
可 以 把 两 张 图 片 放置 在 同一 个 位 置 ， 然 后 通过 GIF 动画 或 CSS 动画 来 让 它 
们 快速 轮 播 。 这 个 方案 比 并 排 图 片 的 方式 要 好 很 多 ， 但 对 用 户 来 说 ， 找 出 所 
有 的 差异 需要 花 些 时 间 一 他们 需要 等 竺 多 次 轮 播 循环 ， 因 为 在 每 个 循环 周 
期 内 只 能 盯 住 图 片 的 一 块 区 域 。 


男 一 种 更 友好 的 解决 方案 叫 作 “图 片 对 比 滑动 控件 ”这 个 控件 会 把 两 
张 图 片 关 加 起 来 ， 允 许 用 户 拖 动 分 割 条 来 控制 这 两 张 图 片 的 显露 区 域 "。 当 
然 ， 在 HIML 中 并 不 存在 这 样 一 种 控件 ， 我 们 只 能 通过 已 有 的 元 素来 模拟 
出 这 种 效果 。 这 些 年 来 ， 这 个 控件 已 经 有 了 多 种 实现 了 ， 但 通常 都 需要 依赖 
JavaScript 框架 ， 外 加 一 大 块 JavaScript 代码 。 























JU 这 个 控件 还 有 一 些 变 种 : 用户 只 需要 移动 鼠标 ， 而 不 需要 拖 动 。 这 种 方式 的 好 处 在 于 它 易 于 
发 现 和 使 用 ， 但 体验 可 能 并 不 是 很 舒服 。 
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Fire crews douse Royal Mansions on London Road in Croydon 





有 没有 一 种 简单 的 方法 可 以 实现 这 个 控件 呢 ? 实 际 上 ， 方 法 不 止 一 种 ! 


CSS resize 方案 


仔细 想 一 想 就 会 发 现 ， 图 片 对 比 滑动 控件 基本 上 可 以 理解 为 两 层 结构 : 
下 层 是 一 张 固 定 的 图 片 ， 上 层 的 图 片 则 可 以 在 水 平方 向 上 调整 大 小 ， 从 而 或 
多 或 少 地 显露 出 下 层 图 片 。 这 正 是 JavaScript 框架 的 价值 所 在 : 让 上 层 图 片 
的 蜗 度 可 以 由 鼠标 拖 动 调整 。 不 过 ， 要 让 某 个 元 系 的 大 小 变 得 可 调整 ， 并 
不 需要 动用 脚本 。 在 CSS 基本 UI 特性 (第 三 版 〉(http://w3.org/TR/ess3- 
ui/#resize 〉 中， 我 们 获得 了 一 个 为 此 而 生 的 新 属性 : 低调 的 resize ! 


哪 介 你 从 来 没有 听 说 过 这 个 属性 ， 也 应 该 体验 过 它 的 行为 ， 因 为 对 
<textarea> 元 素来 说 ， 这 个 属性 被 默认 设置 为 both， 这 让 它 在 水 平和 垂直 
方向 上 都 是 可 以 调整 大 小 的 ~。 不 过 ， 这 个 属性 实际 上 适用 于 任何 元 素 ， 只 
要 它 的 overflow 属性 不 是 visible。 对 几乎 所 有 元 素来 说 ，resize 默认 都 
是 设置 为 none 的 ， 即 禁用 调整 大 小 的 特性 。 际 了 both 之 外 ， 这 个 属性 接受 
的 值 还 有 horizontal 和 vertical， 它 们 可 以 限制 元 系 调 整 大 小 的 方 问 。 


好 的 ， 问 题 来 了 : 能 否 利用 这 个 属性 来 实现 我 们 想 要 的 滑动 控件 呢 ? 要 

















dQ) 对 <textarea> 元 素 应 用 resize: vertical 样式 往往 是 个 好 主意 ， 这 不 仅 保留 了 它 尺 寸 可 


调 的 特性 ， 而 且 避 免 了 水 平方 向 上 的 斥 才 变化 《这 往往 会 破坏 布局 )。 
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图 6-25 

在 英国 新 闻 媒 体 《 卫 报 》 的 官网 
上 ， 就 有 一 个 交互 式 图 片 对 比 的 
好 例子 ， 它 允许 读者 通过 图 片 的 
对 比 来 了 解 2011 年 伦敦 骚乱 事 
件 的 灾难 性 后 果 。 读 者 需要 拖 动 
两 张 图 片 中 间 的 白色 分 割 条 ， 但 
这 个 分 割 条 自身 并 没有 任何 特征 
是 示 它 是 可 以 拖 动 的 ， 因 此 这 里 
需要 有 一 行 提 示 文 字 (“移动 滑 
有 "Js 在 理想 情况 下 ; 二 个 
合理 而 易 懂 的 界面 是 不 需要 这 种 
提示 文字 的 。 

图 片 来 源 : http:/theguardian.com/ 
uk/interactive/2011/aug/09/london- 
riots-before-after-photographs 


交互 式 的 图 片 对 比 控件 





6-26 
在 加 入 了 一 些 基 本 样式 之 后 ， 这 
个 控件 已 经 变 得 挺 像 那么 回 事 儿 
了 ， 但 我 们 暂时 还 不 能 调整 上 层 
图 片 的 宽度 


动手 试 试 才 知 道 ! 

我 们 的 第 一 个 念头 可 能 是 列 出 两 个 <img> 元 素 。 但 是 ， 直 接 对 一 个 
<img> 元 素 应 用 resize 看 起 来 会 很 怪异 ， 因 为 直接 调整 图 片 大 小 会 导致 其 
变形 失真 “。 如 果 用 一 个 <div> 作为 它 的 容器 ， 再 对 这 个 容器 应 用 resize 
属性 ， 那 就 合理 多 了 。 于 是 ， 结 构 代 码 会 变 为 : 








<div class="image-slider"> 


<div> 
<img src="adamcatlace-before.jpg" alt="Before" /> 
</div> 
<img src="adamcatlace-after.jpg" alt="After" /> 
</div> 


接 下 来 还 需要 添加 一 些 CSS， 完 成 定位 和 设置 民 寸 的 工作 : 


.image-slider { 
position:relative; 
display: inline-block; 

} 


.image-slider > div { 

position: absolute; 

top: 8; bottom: 6; left: 6; 

width: 56%; /* 初始 宽度 */ 

overflow: hidden; /* 让 它 可 以 裁 切 图 片 */ 
上 


.image-slider img { display: block; } 








现在 的 效果 如 图 6-26 所 示 ， 但 它 还 是 静态 的 。 如 末 手 工 修改 宽度 值 ， 
就 可 以 檬 拟 用 户 在 调整 大 小 时 所 能 看 到 的 各 个 阶段 的 效果 。 为 了 让 它 的 宽度 
可 以 动态 地 根据 用 户 的 交互 发 和 改变， 我们 就 要 请 出 resize 属性 了 : 


.image-slider > div { 
position: absolute; 
top: 860; bottom: 6; left: ©; 
width: 56%; 





overflow: hidden; 
resize: horizontal; 
} 





虽然 能 看 出 的 变化 只 有 上 层 图 片 右 下 角 的 那个 调节 手柄 (参见 图 
6-27)， 但 我 们 已 经 可 以 拖 动 这 个 手柄 来 随心 所 欲 地 调整 上 层 图 片 的 客 度 
了 ! 不 过 ， 在 稍 作 和 尝试 之 后 ， 我 们 还 是 会 发 现 一 些 缺 后 。 

加 可 以 把 <div> 的 宽度 拉 伸 到 超过 图 片 宽度 的 程度 。 

可 调 记 手柄 不 容易 辨认 。 


J 一 旦 object-fit 和 object-position 得 到 浏览 需 的 广泛 文 持 ， 就 不 存在 这 个 问题 了 。 因 为 
有 了 这 两 个 属性 ， 我 们 就 可 以 像 控制 背景 图 像 的 缩放 那样 去 控制 图 片 的 缩放 了 。 





第 一 个 问题 是 比较 容易 解决 的 。 我 们 要 做 的 就 是 把 它 的 max-width 指 
定 为 196%。 不 过 第 二 个 问题 就 稍稍 有 些 复 杂 。 不 地 的 是 ， 目 前 还 没有 任何 
标准 的 方法 可 以 设置 这 个 调节 手柄 的 样式 。 有 些 泻 染 引擎 特别 为 这 个 需求 提 
供 了 私有 的 伪 元 素 (比如 ::-webkit-resizer)， 但 不 论 是 在 兼容 性 方面 ， 
还 是 在 样式 的 灵活 性 方面 ， 这 个 方式 都 有 着 不 小 的 局 限 。 面 对 山 穷 水 尽 的 局 
面 ， 我 们 冒 出 了 一 个 大 胆 的 想法 : 用 一 个 伪 元 系 履 盖 在 调节 手柄 之 上 。 这 
一 方面 可 以 很 方便 地 设置 样式 ， 另 一 方面 ， 即 使 在 不 加 pointer-events : 
none 的 情况 下 ， 这 个 伪 元 素 也 不 会 干扰 调节 手柄 的 功能 。 因 此 ， 一 个 路 浏 
览 亏 的 调节 手柄 美化 方案 只 需要 把 一 个 假 的 调节 手柄 上 履 盖 在 它 上 面 。 让 我 们 
来 试 试看 吧 








.image-slider > div::before { 
content: ''; 
position: absolute; 
bottom: 6; right: 6; 
width: 12px; height: 12px; 
background: white; 
cursor: ew-resize,; 


} 


请 注意 cursor: ew-resize 这 条 声明 : 它 提供 了 额外 的 自 释 性 ， 可 
以 提示 用 户 这 个 区 域 可 以 像 调节 手柄 那样 拖 动 。 不 过 ， 我 们 不 应 该 只 依赖 
鼠标 光标 提供 唯一 的 自 释 性 ， 因 为 这 种 自 释 性 只 有 当 用 户 与 之 交互 时 才 是 
可 见 的 。 


现在 ， 我 们 的 调 市 手柄 会 显示 为 一 个 日 色 的 方块 (参见 图 6-28)。 到 了 
这 一 步 ， 我 们 就 可 以 尽情 地 对 它 设置 样式 了 。 比 如 说 ， 如 果 我 们 想 把 它 设置 
为 一 个 日 色 三 角形 ， 并 且 让 它 跟 图 片 的 边缘 保持 5px 的 间 际 参见 图 6-29)， 
就 可 以 这 梓 写 : 








padding: 5px; 
background: 

linear-gradient(-45deg, white 56%, transparent 0); 
background-clip: content-box ; 


最 后 还 有 一 点 改进 的 空间 。 我 们 可 以 对 这 两 张 图 片 应 用 user-select: 
none， 这 样 即 使 用 户 在 没有 点 中 调 市 手 顶 的 情况 下 拖 动 鼠标 ， 也 不 会 误 选 图 
片 。 把 所 有 想法 综合 到 一 起 ， 最 终 的 代码 如 下 所 示 : 


.image-slider { 
position:relative; 
display: inline-block; 

l 


.image-slider > div { 
position: absolute; 
top: 0; bottom: 6; left: 60; 
width: 56%; 
max-width: 166%; 





图 6-27 
我 们 的 图 片 滑动 控件 已 经 可 以 发 
挥 它 该 有 的 作用 了 ， 但 仍然 存在 


一 些 问题 





图 6-28 
用 一 个 仿 元 素 覆 盖 上 去 ， 可 以 把 
调节 手柄 美化 为 一 个 白色 的 方块 





图 6-29 

把 这 个 假 的 调节 手柄 ( 实际 上 是 个 
伪 元 素 ) 设置 为 一 个 三 角形 ， 并 与 
图 片 的 右 下 角 保 持 5px 的 间隙 


overflow: hidden; 
resize: horizontal; 


} 


.image-slider > div::before { 
content: ''; 
position: absolute; 
bottom: 6; right: 6; 
width: 12px; height: 12px; 
padding: 5px; 
background: 
linear-gradient(-45deg, white 56%, transparent 0); 
background-clip: content-box ; 
CUrsor: ew-resize; 


} 


.image-slider img { 
display: block; 
user-select: none ; 


} 


ee 


范围 输入 控件 万 到 


上 述 基于 CSS resize 的 方案 表现 很 好 ， 而 且 只 需要 极 少 的 代码 。 不 
过 ， 它 还 是 有 一 些 不 足 之 处 。 

下 它 对 键盘 来 说 是 不 可 访问 的 。 

加 调整 上 层 图 片 的 唯一 方法 就 是 拖 动 。 对 于 较 大 的 图 片 ， 或 有 运动 障 
碍 的 用 户 来 说 ， 这 就 比较 讨 大 了。 如 果 人 允许 用 户 点 击 某 一 个 点 就 可 
以 把 图 片 宽度 调整 到 那个 点 所 在 的 位 置 ， 它 的 体验 就 会 大 幅 提 高 。 

加 用 户 只 能 在 上 层 图 片 的 右 下 角 进 行 调整 大 小 的 操作 。 即 使 我 们 已 经 
对 它 的 样式 进行 了 强化 ， 但 它 仍 然 可 能 被 用 户 忽 略 。 


如 果 我 们 愿意 用 一 点 脚本 ， 就 可 以 将 一 个 原生 的 滑 块 控件 (HTML 范围 
输入 控件 ) 履 盖 在 图 片上 ， 用 它 来 控制 上 层 岁 片 的 伸缩 ， 这 样 就 可 以 解决 上 
述 三 个 问题 。 由 于 一 定 要 用 到 JavaScript， 不 妨 用 脚本 来 添加 所 有 的 附加 元 
系 ， 这 样 就 可 以 把 结构 代码 写 到 最 精简 的 程度 : 


























<div class="image-slider"> 
<img src="adamcatlace-before.jpg" alt="Before" /> 
<img src="adamcatlace-after.jpg" alt="After" /> 
</div> 


然后 ， 我 们 的 JavaScript 代码 会 把 它 转换 成 以 下 结构 ， 并 在 滑 块 上 添加 
一 个 事件 ， 这 样 它 就 可 以 控制 div 的 冤 度 了 : 


<div class="image-slider"> 
<div> 


<img src="adamcatlace-before.jpg" alt="Before" /> 


</div> 
<img src="adamcatlace-after.jpg" alt="After" /> 
<input type="range" /> 

</div> 





JavaScript 代码 是 相当 简洁 明了 的 : 


$$(' .image-slider').forEach(function(slider) { 
// 创建 附加 的 div 元 素 , 并 用 它 包 住 第 一 个 图 片 元 素 
var div = document.createElement('div'); 
var img = Slider.querySelector( img ); 
slider.insertBefore(img, div); 
div.appendChild(img); 


// 创建 滑 块 
var range = document .createElement( '` input ' ) ; 
range.type = range 
range.oninput = function() { 
div.style.width = this.value + '%'; 
}; 
slider.appendChild(range); 
}); 


前 面 一 种 解决 方案 所 用 到 的 CSS 基本 上 可 以 直接 套用 在 这 里 。 只 需要 





删 挥 那 些 我 们 不 再 需要 的 部 分 即 可 : 


国 resize 属性 ; 








国 .image-slider > div::before 规则 ， 因 为 已 经 不 存在 调节 手 


柄 了 了: 
国 max-width， 因 为 现在 由 背 块 和 脚本 来 控制 宽度 。 


经 过 这 一 番 修 改 之 后 ， 我 们 的 CSS 代码 变 为 : 


.image-slider { 
position:relative; 
display: inline-block; 

} 


.image-slider > div { 
position: absolute; 
top: 8; bottom: 06; left: 0; 
width: 56%; 
overflow: hidden; 


} 


.ijimage-slider img { 
display: block; 
user-select: none; 


试验 一 下 这 段 代 码 ， 你 会 发 现 它 已 经 可 以 正常 工作 了 ， 


但 看 起 来 还 有 所 





Cn 


图 6-30 

这 个 控件 现在 可 以 工作 了 ， 但 我 
们 还 需要 给 这 个 泥 围 输入 控件 加 
扩 样 式 





用 input:in-range 来 代替 
简单 的 input 选择 符 ， 是 为 了 只 
在 浏览 器 支持 范围 输入 控件 时 才 
对 它 设 置 样式 。 然 后 ， 我 们 融 可 
以 利用 层 玛 机 制 把 它 在 旧版 浏览 
器 下 隐藏 掉 或 设置 为 其 他 样式 。 





图 6-31 
我 们 已 经 通过 CSS 把 这 个 范围 输 
入 控件 覆 兰 到 图 片 之 上 了 





6-32 

同时 使 用 混合 模式 和 滤 镜 来 让 沁 
围 输入 控件 在 视 党 上 融入 整个 控 
件 ， 并 用 CSS 变形 来 让 它 变 得 更 
大 一些 





致敬 


怪 : 这 个 范围 输入 控件 只 是 随便 放 在 图 片 下 面 而 已 〈 参 见 图 6-30)。 我 们 需 
要 用 一 点 CSS 来 把 它 定位 到 图 片 之 上 ， 并 让 它 与 图 片 一 样 宽 : 


.image-slider input { 
position: absolute; 
left: 6; 
bottom: 16pX ; 
width: 166%; 
margin: 6; 


) 


在 图 6-31 中 可 以 看 到 ， 它 现在 看 起 来 已 经 相当 不 错 了 。 一 些 私有 的 伪 
元 素 可 以 为 这 个 清 块 控件 进一步 设置 样式 ， 比 如 ::-moz-range-track、::- 
ms-track、::-webkit-slider-thumb、::-moz-range-thumb 和 ::-ms- 
thumb 等 。 与 大 多 数 私有 特性 一 样 ， 它 们 的 浑 染 结 采 往往 不 一 致 、 不 健壮 、 
不 可 预测 ， 因 此 我 并 不 推荐 使 用 它们 ， 除 非 你 真 的 别 无 他 法 。 我 是 认真 的 。 


不 过 ， 如 采 我 们 只 是 想 让 这 个 范围 输入 控件 在 视觉 上 与 整个 控件 更 加 统 
一 ， 可 以 用 混合 模式 和 /或 滤 镜 来 实现 。multiply、screen 和 luminosity 
这 几 种 混合 模式 似乎 都 可 以 得 到 不 错 的 效果 。 此 外 ，filter: contrast(4) 
会 让 这 个 滑 块 变 得 黑 晶 分明， 而 低 于 1 的 对 比 度 值 会 让 它 显 示 出 更 多 的 灰色 
调 。 这 其 中 的 可 能 性 是 无 穷 无 尽 的 ， 并 不 存在 通用 的 最 佳 选择 。 你 甚至 可 以 
把 混合 模式 和 滤 镜 组 合 起 来 ， 就 像 这 样 : 























filter: contrast(.5); 
mix-blend-mode: luminosity; 


我 们 还 可 以 增加 用 户 的 可 操作 区 域 ， 从 而 提升 使 用 体验 ( 源 于 Fitts 法 
则 )。 具 体 做 法 是 先 减少 它 的 宽度 ， 再 用 CSS 变形 将 其 放大 : 





width: 56%; 
transform: scale(2) 
transform-origin: left bottom; 


在 图 6-32 中 ， 你 可 以 看 到 完成 这 两 步 优 化 之 后 的 效果 。 这 个 解决 方案 
的 另 一 个 好 处 在 于 〈 尽 管 只 是 暂时 性 的 )， 范 围 输入 控件 当前 的 浏览 器 支持 
度 比 resize 属性 要 好 一 些 。 





向 Dudley Storey (http://demosthenes.info) 脱 由 致 阁 ， 感 谢 他 提出 这 
个 解决 方案 的 第 一 个 版 本 (http://demosthenes.info/blog/819/A-Before-And- 
After-Image-Comparison-Slide-Control-in-HTMLS )。 


CSS 基本 UI 特性 
http://w3.org/TR/css3-ul 


CSS 图 像 
http://w3.0org/TR/css-images 
OE bub 
http://w3.0org/TR/css-backgrounds 


滤 镜 效果 
http://w3.org/ 工 RMlter-effects 


图 像 混合 效果 


http://w3.o0rg/TR/compositing 


CSS 变形 
http://w3.org/TR/css-transforms 
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目 适应 内 部 元 素 





难 十 


众所周知 ， 如 果 不 给 元 素 指 








定 一 个 具体 的 height， 它 就 会 目 动 适应 其 
内 容 的 高 度 。 假 如 我 们 希望 width 也 具有 类 似 的 行为 ， 该 怎么 做 呢 ? 举 个 例 
子 ， 假 设 我 们 用 HIMLS 来 标记 图 斤 元 素 ， 绪 构 代 码 可 能 是 这 样 的 : 








<p>Some text [...]</p> 
<figure> 
<img src="adamcatlace.jpg" /> 
<figcaption> 
The great Sir Adam Catlace was named after 
Countess Ada Lovelace, the first programmer. 
</figcaption> 
</figure> 
<p>More text [...].</p> 





假设 还 知 要 给 它 添 加 一 些 基本 的 样式 ， 比 如 一 道 边框 。 在 上 默认 情况 下 ， 
它 看 起 来 如 图 7-1 所 示 。 但 我 们 实际 上 希望 这 个 figure 元 素 能 跟 它 所 包含 
的 图 片 一 样 宽 (图 片 的 天 寸 往往 不 古 固定 的 )， 而 且 是 水 平 居 中 的 。 目 前 这 
个 演 染 结果 距离 我 们 的 期 望 还 有 不 小 的 差距， 文本 行 比 图 乒 要 宽 多 了 。 如 何 
让 figure 的 宽度 由 它 内 部 的 图 片 来 决定 , 而 不 是 由 它 的 父 元 素来 决定 呢 “? 
闻 荡 江湖 这 么 多 年 ， 相 信 你 已 经 积 揭 了 一 侠 顺 手 的 CSS 代码 大 全 。 在 这 个 
代码 库 里 ， 你 可 能 会 找到 几 段 可 以 满足 这 种 冤 度 行为 的 代码 ， 它 们 通 第 是 以 
副作用 的 方式 来 实现 的 。 


加 让 <figure> 元 系 浮 动 会 让 它 得 到 正确 的 宽度 ， 但 同时 也 彻底 改变 了 
它 的 布局 模式 ， 这 往往 会 导致 我 们 不 想 要 的 结 有 末 《〈 人 参见 图 7-2 )。 

国 对 figure 应 用 display: inline-block 会 让 它 根据 内 容 来 决定 自身 的 
尺寸 ， 但 跟 我 们 想 要 的 方式 还 是 不 一 样 〈 人 参见 图 7-3)。 此 外 ， 即 使 它 的 
宽度 计算 方式 与 我 们 的 期 望 一 致 ， 我 们 也 很 难 继续 完成 水 平 居 中 的 任务 。 
我 们 需要 对 它 的 父 元 系 应 用 text-align: center， 然 后 对 这 个 父 元 系 的 
所 有 子 元 素 (p，uLl，o1l，d1，...) 都 设置 一 遍 text-align: left。 

国 当 开 发 者 走投无路 时 ， 就 只 能 对 figure 应 用 一 个 固定 的 width 或 
max-width 了 ， 然 后 对 figure > img 应 用 max-width: 166%。 可 
是 这 个 方法 无 法 充分 利用 有 将 空间 ， 对 于 过 小 的 图 片 来 说 ， 布 局 效 
果 也 很 突 元 。 此 外 ， 啊 应 式 也 无 从 谈 起 。 


























J 用 CSS 规范 的 术语 来 说 ， 我 们 希望 它 的 宽度 由 内 部 因素 来 决定 ， 而 不 是 由 外 部 因素 来 决定 。 





We ao have ore moee ex herc Er laborum venison nosmud ut voniam sint elba 


在 用 CSS 加 上 了 边框 和 内 边 距 之 
后 ， 这 上段 结构 代码 在 默认 情况 下 
的 泻 染 效果 





图 7-2 
尝试 用 浮动 来 解决 宽度 问题 ， 去 
引发 了 新 的 问题 


36 ” 目 适 应 内 部 元 素 





We al ha me more text hetc Er laborun veniwn nosrnud ut vcnion sin 
\ 
= 





有 没有 一 种 合适 的 CSS 技巧 可 以 解决 这 个 问题 ? 我 们 是 不 是 应 该 放弃 
这 条 路 ， 改 用 脚本 来 动态 地 为 每 个 figure 设置 宽度 ? 


解决 方案 


CSS 内 部 与 外 部 尺寸 模型 (第 三 版 )(http://w3.org/TR/css3-sizing) 是 
一 个 相对 较 新 的 规范 ， 它 为 width 和 height 属性 定义 了 一 些 新 的 关键 字 ， 


写 我 们 的 期 望 相反 ， ee 其 中 最 有 用 的 应 该 就 是 min-content 了 。 这 个 关键 字 将 解析 为 这 个 容器 内 
inline-block 并 不 会 们 想 一 2 ,= 、 ce 一 
0 部 最 大 的 不 可 断 行 元 素 的 宽度 〈 即 最 宽 的 单词 、 图 片 或 具有 固定 宽度 的 盒 元 


要 的 宽度 





We ako have mme more Where Fr laborum venioa nmud ut veniam sint kidhow 
7 
一 


最 终 效 果 
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素 )。 这 正 是 我 们 梦 霖 以 求 的 ! 现在 , 使 用 以 下 两 行 简 单 的 CSS 代码 就 可 以 
把 figure 设置 为 恰当 的 宽度 ， 并 让 它 水 平 居中 : 


figure { 
width: min-content; 
margin: auto; 


i 


你 可 以 在 图 7-4 中 看 到 效 霖 。 为 了 给 那些 旧版 浏览 带 提 供 一 个 平稳 的 回 
退 样式 ， 我 们 需要 在 使 用 这 个 技巧 的 同时 ， 提 供 一 个 固定 的 max-width 值 ， 


比如 : 
figure { 
max-width: 366px ; 
max-width: min-content; 
margin: auto; 
) 


figure > img { max-width: inherit; } 


对 于 现代 浏览 需 来 说 ， 后 一 条 max-width 声明 会 覆盖 前 一 条 。 如 果 
figure 的 尺寸 是 由 内 部 因素 决定 时 ， 第 二 条 规则 中 的 max-width: inherit 
就 不 会 生效 了 。 


S77 play.csssecrets.io/intrinsic-sizing 





向 Dudley Storey (http://demosthenes.info〉 脱 帼 致 效 ， 感 谢 他 提出 这 个 
应 用 场景 (http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With- 
CSS-MinContent)。 

















致敬 
国 CSS 内 部 与 外 部 尺寸 模型 
http://w3.o0org/TR/css3-sizing 
Q) 其 他 的 值 还 有 max-content， 它 的 行为 类 似 于 我 们 在 前 面 看 到 的 display: inline- 
block; 而 fit-content 的 行为 与 浮动 元 素 是 相同 的 (和 min-content 的 效果 通常 一 致 ， 
但 也 有 例外 )。 
结构 与 布局 


精确 控制 表格 列 宽 





难 匮 





尽管 多 年 以 前 我 们 就 不 再 使 用 表格 来 完成 页 面 布 局 了 ， 但 表格 在 现代 网 
站 中 仍然 有 其 不 可 蔡 代 的 位 置 ， 我 们 需要 用 它 来 实现 统计 数据 、 电 子 邮件 、 
拥有 大 量 元 数据 的 列表 等 表格 型 数据 。 对 其 他 元 素 的 display 属性 使 用 表格 
相关 的 关键 字 ， 也 可 以 让 它们 具备 表格 类 元 厅 的 行为 。 尽 管 有 时 候 它们 看 起 
来 很 方便 ， 但 对 于 不 固定 的 内 容 来 说 ， 它 们 的 布局 其 实 是 很 难 预 测 的 。 这 是 
因为 列 宽 根 据 其 内 容 进 行 调整 ， 即 使 我 们 显 式 地 指定 了 width， 也 只 能 起 到 
类 似 提 示 的 作用 ， 如 图 7-5 所 示 。 


鉴于 这 个 原因 ， 我 们 往往 不 得 不 使 用 其 他 元 素来 呈现 表格 型 数据 ， 或 者 
干脆 接受 布局 效果 的 不 可 预测 性 。 有 没有 什么 办 法 可 以 让 表格 的 行为 更 加 可 
控 呢 ? 


解决 方案 


解决 方案 来 日 于 CSS 2.1 中 一 个 鲜 为 人 知 的 属性 ， 叫 作 table-1layout。 
它 的 默认 值 是 auto， 其 行为 模式 被 称 作 自动 表格 布局 算法 ， 也 就 是 我 们 了 最 
为 熟悉 的 表格 布局 行为 〈 就 像 图 7-5 那样 )。 不 过 ， 它 还 接受 另外 一 个 值 
fixed， 这 个 值 的 行为 要 明显 可 控 一 些 。 它 把 更 多 的 控制 权 交 给 了 网 页 开 
发 者 ( 没 错 ， 就 是 你 )， 只 把 较 少 的 控制 权 留 给 演 染 引 敬 。 我 们 设置 的 ( 宽 
度 ) 样式 会 直接 起 作用 ， 而 不 仅仅 被 视 为 一 种 提示 ; 同时 ， 洪 出 行为 (包括 
text-overflow) 与 其 他 元 素 行 为 也 是 一 样 的 ， 因 此 表格 的 内 容 将 只 能 影响 
表格 行 的 高 度 了 。 

这 种 固定 表格 布局 算法 不 仪 更 容易 预测 、 便 于 使 用 ， 同 时 也 明显 更 快 。 
因为 表格 的 内 容 并 不 会 影 啊 单元 格 的 宽度 ， 所 以 在 页 面 的 下 载 过 程 中 ， 表 格 
不 需要 频繁 重 绘 。 相 信 我 们 都 对 页 面 加 载 过 程 中 表格 不 断 重 新 调整 列 宽 的 区 
怖 情景 记忆 犹 新 。 对 于 固定 表格 布局 来 说 ， 这 种 情况 再 也 不 会 发 生 了 。 

在 使 用 时 ， 我 们 只 需要 对 <table> 元 素 或 其 他 具有 display: table 样 
式 的 元 系 应 用 这 个 属性 即 可 。 请 注意 ， 为 了 确保 这 个 技巧 奏 殖 ， 需 要 为 这 
些 表 格 元 素 指 定 一 个 宽度 (哪怕 是 166%)。 同 样 ， 为 了 让 text-overflow: 
ellipsis 发 挥 作用 ， 我 们 还 需要 为 那 一 列 指定 宽度 。 这 就 行 了 ! 你 可 以 在 
7-6 中 看 到 效果 : 
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table { 


table-layout: fixed; 


width: 166%; 
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对 两 列表 格 来 说 ， 默 认 的 表格 布 定年 元 格 肌 宽度 ， 则 这 些 时 元 格 束 会 根据 蕊 们 站 容 的 长 
局 算法 在 处 理 不 同 内 容 时 的 不 同 ee 也 就 是 说 ， 内 容 较 长 的 单元 格 所 能 分 配 到 






表现 ( 表格 的 容器 用 虚线 标示 ) 


旨 定 单元 格 的 宽度 ， 则 这 些 单元 格 就 会 根据 
它们 内 容 的 长 短 来 分 配 宽度 。 也 就 是 说 ， 内 
容 较 长 的 单元 格 所 能 分 配 到 的 宽度 也 较 多 


注意 ， 这 个 表格 的 列 宽 分 配 结 末 跟 上 面 那 个 
表格 不 同 





即使 我 们 为 单元 格 指定 了 
宽度 ， 也 未 必 会 得 到 对 应 
的 结果 。 比 如 这 个 单元 格 
的 宽度 被 指定 为 1988px 


如 本 我 们 蔡 
正文 本 折 行 
行为 ， 那 么 


而 这 个 单元 格 的 宽度 被 指定 为 2688px。 由 于 
外 层 容器 所 能 提供 的 空间 远 远 不 足 38868px， 
这 两 个 单元 格 的 宽度 会 按 比例 缩小 ， 分 别 得 
到 总 宽度 的 33.3% 和 66.6% 


25 | 在 
表格 宽度 可 而 且 text-overflow: ellipsis 对 此 也 无 能 为 力 ， 这 一 点 很 遗憾 


能 会 远 远 超 
出 其 容器 的 
宽度 


BE Da 
码 块 也 可 能 
会 导致 同样 
的 问题 








如 采 我 们 不 


如 采 我 们 不 





表格 的 每 一 


行 都 会 参与 到 列 宽 


的 计算 


中 ， 而 不 仅 是 第 一 行 





即使 我 们 为 单元 格 指定 了 宽度 ， 也 未 必 


如 末 我 们 禁 
止 文本 折 行 
行为 让 入 
表格 宽度 可 
能 会 远 远 超 


出 其 容 絮 的 


宽度 


大 图 片 或 代 
码 块 也 可 能 
会 导致 同样 
的 问题 


而 且 text-overflow: 


定单 元 格 的 宽度 ， 则 这 些 单元 格 
议会 根 据 ， 书 们 内 容 的 长 短 来 分 配 宽 
度 。 也 就 是 说 ， 内 容 较 长 的 单元 格 
所 能 分 配 到 的 宽度 也 较 多 





中 定单 元 格 的 宽度 ， 则 这 些 单元 格 
就 会 根据 它们 内 容 的 长 短 来 分 配 宽 
度 。 也 就 是 说 ， 内 容 较 长 的 单元 格 
所 能 分 配 到 的 宽度 也 较 多 


注意 ， 这 个 表格 的 列 宽 分 配 结 末 跟 
上 面 那个 表格 不 同 





CE ED DAE 


ellipsis 对 此 也 无 能 为 力 


play.csssecrets.io/table-column-widths 


向 Chris Coyier (http://css-tricks.com) 脱 由 致 效 ， 感 谢 他 提出 这 个 技巧 
(http://css-tricks.com/fixing-tables-long-strings )。 
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对 图 7-5 中 的 表格 应 用 了 table- 
layout: fixed 之 后 的 效果 。 按 
从 上 到 下 的 顺序 总 结 为 ， 如 果 不 指 
定 任何 宽度 ， 则 各 列 的 宽度 将 是 平 
均 分 配 的 ;后 续 的 表格 行 并 不 会 影 


响 询 宽 ;， 给 单元 格 指定 很 大 的 宽 
度 也 会 直接 生效 ， 并 不 会 自动 缩 


小 overflow 和 text-overflow 
局 性 部 是 加 jaE 品 生 站 丰 JU 条 
overflow 的 值 是 visible， 则 单 
元 格 的 内 容 有 可 能 会 洲 出 


定 为 1660px 
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根据 兄弟 元 素 的 数量 来 设置 样式 


难 匮 


在 茶 些 场景 下 ， 我 们 需要 根据 兄 屁 元素 的 总 数 来 为 它们 设置 样式 。 最 稼 
见 的 场景 就 是 ， 当 一 个 列表 不 断 延 长 时 ， 通 过 隐藏 控件 或 压缩 控件 等 方式 来 
节省 屏 疾 空间 ， 以 此 提升 用 户 体 验 。 下 面 列 出 了 一 些 典 型 案例 。 


加 电子 邮件 列表 或 包含 文本 内 容 的 类 似 列 表 。 如 果 列 表 中 只 有 少量 列 
表 项 ， 我 们 可 以 为 第 一 项 展示 出 多 行 预览 文字 ; 当 列 表 项 不 断 增加 
时 ， 需 要 逐渐 减少 每 一 项 的 预览 行 数 ， 当 列表 的 总 长 度 超出 整个 视 
口 的 高 度 时 ， 可 能 会 把 预览 文字 完全 隐藏 ， 并 把 按钮 变 小 ， 以 此 避 
饮用 户 对 页 面 的 深 动 。 

恒 符 办 事项 应 用 程序 。 当 列表 中 的 事项 较 少 时 ， 我 们 可 以 用 一 个 较 大 
的 字号 来 显示 所 有 事项 ;， 随 肴 事项 的 数量 不 断 增 加 ， 我 们 会 不 断 减 
小 字号 来 显示 每 个 事项 。 

恒 调 色 板 应 用 程序 ， 每 个 色 块 上 都 显示 出 配套 的 控件 。 当 色 块 的 数量 
不 断 增 加 时 ， 它 们 所 占据 的 空间 也 会 相应 增加 ， 此 时 我 们 可 能 和 布 望 
色 块 的 控件 变 得 紧凑 一 些 〈 人 参见 图 7-7 )。 

国 包含 多 个 <textarea> 元 率 的 应 用 程序 。 每 当 我 们 添加 一 个 新 的 
<textarea> 元 素 ， 所 有 元 素 都 会 同步 缩小 〈 类 似 于 bytesizematters. 
com 的 效果 )。 


不 过 ， 对 CSS 选择 符 来 说 ， 基 于 兄弟 元 素 的 总 数 来 匹配 元 素 并 不 简单 。 
设想 一 个 列表 ， 假 设 仅 当 列 表 项 的 总 数 为 4 时 才 对 这 些 列表 项 设置 样式 。 我 
们 可 以 用 1i:nth-child(4)" 来 选中 列表 的 第 四 个 列表 项 ， 但 这 并 不 是 我 们 
想 要 的 ;我 们 需要 在 列表 项 的 总 数 为 4 时 选中 每 一 个 列表 项 。 


























J 本 市 用 到 的 都 是 :nth-child() 选择 符 ， 但 我 们 讨论 的 所 有 内 容 也 适用 于 :nth-of-type() 选 
择 符 ， 而 且 它 在 语义 上 往往 更 加 贴切 ， 因 为 在 所 有 的 兄弟 元 系 中 可 能 包含 了 不 同 的 元 系 类 
型 ， 而 我 们 往往 只 关心 同类 型 的 元 系 。 本 市 的 示例 用 到 的 是 列表 项 ， 但 我 们 讨论 的 技巧 同样 
适用 于 其 他 类 型 的 元 素 。 











结构 与 布局 


© Add color 


OO Add color 3 Delete color [中 Add color 人 Delete color 





@ Add 


《Delete 


四 Add 


(3 Delete 





-a CD CE IC CE 





接 下 来 的 想法 可 能 就 是 把 :nth-child() 和 兄弟 选择 符 (~) 结合 起 来 ， 
比如 1i:nth-child(4)，1i:nth-child(4) ~ 1i。 不 过 ， 这 个 选择 符 只 能 
命中 第 四 个 列表 项 以 及 在 它 之 后 的 所 有 列表 项 (参见 图 7-8)， 这 跟 列 表 项 的 
总 数 没 有 什么 关系 。 由 于 并 没有 一 种 组 合式 选择 符 可 以 用 “回头 看 ”的 方式 
选中 之 前 的 兄弟 元 素 ， 那 么 这 个 任务 对 CSS 来 说 就 注定 要 失败 了 吗 ? 千 万 
不 要 轻易 放弃 ! 


解决 方案 


对 于 只 有 一 个 列表 项 的 特殊 场景 来 说 ， 解 决 方案 显然 就 是 :only- 
child, 这 个 伪 类 选择 符 就 是 为 这 种 情况 而 设计 的 。 它 不 仅 可 以 成 为 一 个 很 好 
的 起 点 ， 而 且 这 个 属性 在 某 些 场景 下 确实 可 以 派 上 用 场 ， 因 此 可 以 在 规范 中 
占有 一 席 之 地 。 举 例 来 说 ， 在 图 7-7 中 你 可 以 发 现 ， 当 列表 中 只 有 一 个 列表 
项 时 ， 我 们 把 删除 按钮 隐藏 起 来 了 ， 这 个 需求 是 可 以 由 :only-child 选择 
符 来 完成 的 : 

















li:only-child { 
VT 
jr 
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随 着 色 块 数量 的 不 断 增加 ， 可 用 
空间 也 相应 减少 ， 我 们 需要 不 断 
地 缩减 控件 的 尺寸 。 请 注意 ， 当 
调 色 板 中 只 有 一 个 色 块 时 ， 我 
们 做 了 特殊 处 理 ， 隐 去 了 删除 
按钮 。 图 中 的 颜色 取 自 Adobe 
Color ( http://color.adobe.com ) 
网 站 的 下 列 调 色 板 : Agave 
( http://color.adobe.com/agave- 
color-theme-387108 )，Sushi Maki 
( https://color.adobe.com/Sushi- 
Maki-color-theme-350205 ) 





V 
4 
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选择 符 li:nth-child(4)，1i:nth- 
child(4) ~ 1i 会 选中 哪些 元 素 
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在 分 别 包 含 了 3、4、8 个 列表 项 
的 列表 中 ，1i:first-child:nth- 
last-child(4) 会 选中 哪些 元 素 


实际 上 ，:only-child 等 效 于 :first-child:last-child， 道 理 很 
简单 : 如 果 第 一 项 同时 也 是 最 后 一 项 ， 那 从 逻辑 上 来 说 它 就 是 唯一 的 那 一 
项 。:1last-child 其 实 也 是 一 个 快捷 写法 ， 相 当 于 :nth-last-child(1): 








li:first-child:nth-last-child(1) { 
J TS Il:only child */ 
} 








这 个 1 其 实 是 一 个 参数 ， 我 们 可 以 根据 需要 来 修改 这 个 值 。 你 能 猜 到 
1i:first-child:nth-last-child(4) 会 命中 哪些 元 素 吗 ? 如果 从 :only- 
child 的 例子 举一反三 ， 认 定 这 个 选择 符 会 在 列表 项 总 数 为 4 时 命中 所 有 
列表 项 ， 那 你 可 就 太 过 乐观 了 。 我 们 还 没 达 到 那个 效果 ， 但 已 经 处 在 正确 
的 方向 上 了 。 让 我 们 把 这 两 个 伪 类 分 开 来 想 一 想 : 我 们 在 找 一 个 同时 匹 
配 :frst-child 和 :nth-last-child(4) 的 元 素 。 因 此 ， 这 个 元 素 需 要 是 
父 元 素 的 第 一 个 子 元 素 ， 同 时 还 需要 是 从 后 往 前 数 的 第 四 个 子 元 素 。 有 哪个 
元 系 可 以 满足 这 个 条 件 呢 ? 


答案 就 是 ， 一 个 正好 有 四 个 列表 项 的 列表 中 的 第 一 个 列表 项 “参见 图 
7-9)。 这 并 不 完全 是 我 们 想 要 的 结 朱 ， 但 已 经 非常 接近 了 。 我 们 现在 已 经 找 
到 一 种 命中 特定 数量 列表 项 中 第 一 项 的 方法 ， 接 下 来 就 可 以 用 兄 第 选择 符 
(~) 来 命中 它 之 后 的 所 有 兄弟 元 素 : 相当 于 在 这 个 列表 正好 包含 四 个 列表 项 
时 ， 命 中 它 的 每 一 项 ， 而 这 正 是 我 们 一 直 想 要 达成 的 目标 : 























li:first-child:nth-last-child(4), 
li:first-child:nth-last-child(4) ~ 1i { 

/* 当 列 表 正 好 包含 四 项 时 ,命中 所 有 列表 项 */ 
lr 








这 个 方法 需要 的 代码 还 是 相当 元 长 法 开 的 。 我 们 可 以 利用 预 处 理 锅 《〈 比 
如 SCSS) 来 避免 这 个 问题 ， 不 过 现 有 预 处 理 从 的 语法 在 处 理 这 个 需求 时 仍 
然 有 些 宋 拙 : 





/* 定义 mixin */ 

@Qmixin n-items($n) { 
&:first-child:nth-last-child(#{$n}), 
&:first-child:nth-last-child(#{$n}) ~ & { 

Q@content ; 
} 
} 


/* 调用 时 是 这 样 的 : */ 
Te 
@include n-items(4) { 
VN 人 
} 


向 Andre Luis (http://andr3.net) 脱 帆 致 教 ， 感 谢 他 提出 的 一 个 想法 启 
发 了 本 节 的 技巧 (http://andr3.net/blog/post/142)。 


根据 兄 贡 元 素 的 数量 范围 来 匹配 元 素 


在 实际 的 应 用 场景 中 ， 我 们 期 望 匹 配 元 素 的 条 件 往 往 并 不 是 列表 项 的 具 
体 数量 ， 而 是 一 个 数量 范围 。:nth-child() 选择 符 在 这 方面 非常 好 用 ， 我 
们 可 以 用 它 来 命中 一 个 范围 ， 比 如 “选中 第 4 项 之 后 的 所 有 项 ”这 样 的 需求 
就 完全 不 在 话 下 。 它 的 参数 不 仅 可 以 是 简单 的 数字 ， 也 可 以 是 像 an+b 这 样 
的 表达 式 〈 比 如 :nth-child(2n+1))。 这 里 的 n 表示 一 个 变量 ， 理 论 上 的 范 
围 是 0 到 + co《〈 在 实际 情况 下 ， 由 于 页 面 中 元 素 的 数量 本 来 就 是 有 限 的 ， 超 
过 某 个 特定 数量 的 值 实际 上 也 没有 元 素 可 选 卫 )。 如 宁 使 用 n+b 这 种 形式 的 
表达 式 〈 此 时 相当 于 a 的 取 值 为 1)， 那 么 不 论 n 如 何 取 值 ， 这 个 表达 式 都 
无 法 产生 一 个 小 于 b 的 值 。 因 此 ，n+b 这 种 形式 的 表达 式 可 以 选中 从 第 b 个 
开始 的 所 有 子 元 素 。 举 例 来 说 ，:nth-child(n+4) 将 会 选中 除了 第 一 、 二 、 
三 个 子 元 系 之 外 的 所 有 子 元 素 〈 人 参见 图 7-10 )。 





















利用 这 个 技巧 ， 我 们 可 以 在 列表 项 的 总 数 是 4 或 更 多 时 选中 所 有 列表 
项 (参见 图 7-11)。 在 这 种 情况 下 ， 我 们 可 以 把 表达 式 n+4 传 给 :nth-1ast- 
child(): 


li:first-child:nth-last-child(n+4), 
li:first-child:nth-last-child(n+4) ~ 1i { 

/* 当 列 表 至 少 和 包含 四 项 时 ,命中 所 有 列表 项 */ 
} 


同 理 ，-n+b 这 种 形式 的 表达 式 可 以 选中 开头 的 b 个 元 素 。 因 此 ， 仅 妆 
列表 中 有 4 个 或 更 少 的 列表 项 时 (参见 图 7-12)， 要 选中 所 有 列表 项 可 以 这 
样 与: 

li:first-child:nth-last-child(-n+4), 

li:first-child:nth-last-child(-n+4) ~ li { 


/* 当 列 表 最 多 包含 四 项 时 ,命中 所 有 列表 项 */ 
} 





致敬 


:nth-* 选择 符 确 实 不 是 那 
么 容易 理解 。 如 果 你 在 这 方面 有 
困惑 的 话 ， 可 以 在 网 上 找 一 个 测 
试 工 具 来 试验 各 种 表达 式 的 效果 。 
我 就 写 过 一 个 这 样 的 工具 lea. 
verou.me/demos/nth.html， 此 外 
还 有 很 多 类 似 的 工具 可 以 选择 。 





图 7-10 

在 分 别 包 含 了 3、4、8 个 列表 项 
的 列表 中 ，1i:nth-child(n+4) 
会 选中 哪些 元 素 


V 
8 
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在 分 别 包 含 了 3、4、8 个 列表 项 
的 列表 中 ，1i:first-child:nth- 
last-child(n+4), 1i:first- 
child:nth-last-child(n+4) ~ 
1i 会 选中 哪些 元 素 







38 根据 元 种 元 素 的 数量 来 设置 样 却 


当然 ， 我 们 还 可 以 把 这 两 种 技巧 组 合 起 来 使 用 ， 不 过 代码 也 会 变 得 更 加 


v 
1 


复杂 。 假 设 我 们 和 希望 在 列表 包含 2 ~ 6 个 列表 项 时 命中 所 有 的 列表 项 ， 可 以 
这 样 与 : 





11:first-child:nth-last-child(n+2):nth-last-child(-n+6)， 

li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li { 
/* 当 列 表 包 含 2~ 6 项 时 ,命中 所 有 列表 项 */ 

1 


play.csssecrets.io/styling-sibling-count 





I 


在 分 别 包 含 了 3、4、8 个 列表 项 
的 列表 中 ,1i:first-child:nth- 


last-child(-n+4), 1i:first- 图 选择 符 
RE http:/w3.org/TR/selectors 
1i 会 选中 哪些 元 素 








难 匮 


在 过 去 的 几 年 间 ， 有 一 种 网 页 设计 手法 逐渐 流行 起 来 ， 我 将 它 称 作 背 景 


客 度 满 幅 ， 内 容 客 度 固定 。 这 个 设计 的 一 些 典 型 特征 如 下 。 
国 页 面 中 包含 多 个 大 区 块 ， 每 个 区 块 都 占据 了 整个 视 口 的 宽度 ， 区 块 
的 背景 也 各 不 相同 。 
加 内 容 是 定 宽 的 ， 即 使 在 不 同 分 辨 骏 下 的 宽度 不 一 样 ， 那 也 只 是 因为 
媒体 查询 改变 了 这 个 固定 的 宽度 值 而 已 。 在 某 些 情况 下 ， 不 同 区 块 
的 内 容 也 可 能 具有 不 同 的 宽度 。 
有 时 候 ， 整 个 网 页 都 是 由 这 种 风格 的 多 个 区 块 组 成 的 (比如 图 7-13， 
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或 者 像 图 7-14 那样 稍微 含 蘑 一些)。 不 过 在 更 多 的 情况 下 ， 页 面 中 只 有 有 某 个 
特定 区 域 是 以 这 个 风格 来 设计 的 ， 最 典型 的 就 是 页 脚 〈 参 见 图 7-15 )。 





Flights 
Round-trip One-way “ Multi-city 


| searcn | 


Show flexible datesv 


Boston (BOS) San Francisco (SFO) | Depart Retum 1 adult, Economy 


Include nearby Include nearby 


Compare hundreds of travel sites at once， 
Find the best deals faster， 





要 实现 这 种 设计 凡 格 ， 最 常见 的 方法 就 是 为 每 个 区 块 准备 两 层 元 素 : 外 层 
用 来 实现 满 幅 的 育 景 ， 内 层 用 来 实现 定 宽 的 内 容 。 后 者 是 通过 margin: auto 
实现 水 平 居 中 的 。 举 例 来 说 ， 采 用 这 种 设计 的 页 脚 通 党 需要 把 结构 代码 写成 : 





<footer> 
<div class="wrapper"> 
<!-- 页 脚 的 内 容 写 在 这 里 --> 
</div> 
</footer> 





同时 用 CSS 来 设置 这 两 层 元 素 的 样式 : 


footer { 
background: #333; 


) 


.wrapper { 
max-width: 966px; 
margin: 1em auto; 


看 起 来 很 眼熟 对 不 对 ?目前 绝 大 多 数 的 网 页 设计 师 / 工程师 部 是 这 样 写 
的 。 难 道 为 了 这 个 效 末 就 一 定 要 添加 一 层 额 外 的 元 系 ? 我 们 能 人 否 在 现代 CSS 
的 帮助 下 彻 友 抛 弃 这 个 崇 袭 ? 


解决 方案 


我 们 先 来 想 一 想 ，margin: auto 在 这 个 场景 下 到 撒 发 挥 了 什么 作用 。 
这 条 声明 所 产生 的 左右 外 边 距 实际 上 都 等 于 视 口 宽度 的 一 半 减 去 内 容 宽度 的 
一 半 。 由 于 百分比 在 这 里 是 基于 视 口 锅 度 来 解析 的 《假设 所 有 祖先 元 素 都 没 
有 显 式 指定 宽度 )， 我 们 可 以 把 这 个 外 边 距 的 值 表达 为 56% - 458px。 实 际 
上 ，CSS 值 与 单位 (第 三 版 (http://w3.org/TR/css-values-3/#calc) 定义 了 一 











图 7-14 

在 行程 预订 网 站 kayak.com 上 ， 
这 种 设计 风格 是 以 一 种 极为 含蓄 
的 方式 应 用 到 整个 页 面 的 


OUR STORY 


THE SOURCE OF OUR 
INSPIRATION 


THINKING GREEN 
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一 个 华丽 的 爱尔兰 网 站 柯 诺 苏 和 葡 
萄 园 酒 庄 ( http://conosur.ie ) 就 
大 量 运 用 了 这 种 设计 手法 








图 7-15 
借 宿 网 站 airbnb.com 在 页 脚 中 采 
用 了 这 个 设计 


@ 别 忘 了 在 calc() 函数 中 用 
空白 符 把 - 和 + 隔 起 来 ， 否 则 会 
产生 解析 错误 ! 这 个 看 似 怪 异 的 
规则 是 为 了 向 前 兼容 ,在 未 来 ， 
calc() 可 能 会 允许 使 用 标识 符 ， 
而 这 些 标识 符 本 身 可 能 会 包含 连 
字符 ， 容 易 与 减 号 混淆 。 





near re 





ed be hp pre we Re Det 
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Mac 上 流行 的 生产 力 工 具 Alfred 
( http://alfredapp.com ) 也 在 官网 
上 广泛 采用 了 这 种 设计 风格 


第 7 章 结构 与 布局 





个 calc() 函数 ， 它 允许 我 们 在 CSS 中 和 直接 以 这 种 简单 的 算式 来 指定 属性 的 
值 。 如 果 用 calc() 取代 原先 的 auto， 这 个 内 层 容器 的 样式 就 会 变 成 : 


.wrapper { 
max-width: 9606pX ; 
margin: 1em calc(56% - 458px); 





之 所 以 要 在 页 脚 内 加 一 层 容 需 元 素 ， 唯 一 的 原因 就 是 为 了 给 它 的 
margin 指定 神奇 的 auto 关键 字 ， 从 而 实现 内 容 的 水 平 居中 布局 。 不 过 ， 现 
在 我 们 已 经 用 calc() 蔡 代 了 这 个 神奇 的 auto， 而 且 这 个 新 值 实 际 上 可 以 作 
为 一 个 通用 的 CSS 长 度 值 应 用 到 任何 一 个 接受 长 度 值 的 属性 上 。 这 意味 者 
如 果 我 们 愿意 ， 还 可 以 把 这 个 长 度 值 应 用 到 父 元 素 的 padding 上 ， 而 整个 效 
条 是 保持 不 变 的 : 











footer { 
max-width: 9606pX ; 
padding: 1lem calc(56% - 456pX) ; 
background: #333; 


} 
.wrapper {} 


如 你 所 见 ， 经 过 这 一 番 改 造 之 后 ， 我 们 已 经 把 内 层 容 右上 的 所 有 CSS 
代码 都 剥离 干净 了 。 也 就 是 说 ， 它 其 实 已 经 不 需要 参与 布局 了 ， 我 们 可 以 安 
全 地 把 它 从 结构 代码 中 去 挥 。 终 于 ， 我 们 在 纯净 无 见 余 的 HTML 结构 上 实 
现 了 想 要 的 设计 风格 。 这 个 方案 还 有 进一步 优化 的 空间 吗 ? 没 错 。 你 要 相 
言 ， 追 求 晶 越 的 道路 是 永 无 止境 的 ! 

如 果 把 width 这 一 行 声 明 注释 择 ， 你 会 发 现 其 实 没有 影响 。 视 觉 效 宁 是 
完全 一 样 的 ， 而 且 不 论 视 口 尺 寸 如 何 变化 都 是 如 此 。 这 是 为 什么 呢 ? 因为 当 
内 边 距 是 56% - 456px 时 ， 只 可 能 给 内 容留 出 998px 〈2x456px) 的 可 用 空 
间 。 只 有 把 width 显 式 地 设置 为 988px 之 外 《或 大 或 小 ) 的 其 他 值 ， 我 们 
才 有 可 能 看 出 区 别 。 由 于 我 们 想 要 得 到 的 内 容 宽度 本 来 就 是 999px， 这 一 行 
声明 其 实 就 是 元 余 的， 我 们 可 以 把 它 去 掉 ， 让 代码 更 加 DRY。 

男 一 个 可 以 优化 的 地 方 在 于 ， 我 们 可 以 增加 一 条 回 退 样式 来 增强 问 后 羔 
容 性 。 这 样 即使 浏览 融 不 文 持 calc()， 我 们 也 至 少 可 以 得 到 一 个 相对 合理 
的 内 边 距 : 




















footer { 
padding: 1em; 
padding: lem calc(56% - 4506px); 
background: #333; 

J 


终于 大 功 告 成 了 。 我 们 抛弃 了 宛 余 的 标签 ， 花 费 了 三 行 CSS 代码 ， 最 
终 达 成 了 这 个 完美 的 结果 : 样式 灵活 、 代 码 简 练 ， 还 具有 良好 的 兼容 性 ! 





play.csssecrets.io/fluid-fixed 


一 CSS 值 与 单位 外 如 果 屏 带 的 宽度 比 内 容 的 宽度 
还 要 窗 ， 这 个 解决 方案 所 产生 的 效 
果 就 是 没有 内 边 距 ! 不 过 别 急 ， 我 
们 可 以 用 媒体 查询 来 修复 这 个 问题 。 


http://w3.org/TR/css-values 
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“44 年 前 我 们 就 把 人 类 送 上 月 球 了 ， 但 现在 我 们 仍然 无 法 在 CSS 中 
实现 垂直 居中 。” 





——James Anderson (https://twitter.com/jsa/ 
status/358603820516917249) 
在 CSS 中 对 元 系 进 行 水 平 居 中 是 非常 简单 的 ， 如 末 它 是 一 个 行内 元 素 ， 
就 对 它 的 父 元 系 应 用 text-align: center; 如 末 它 是 一 个 块 级 元 系 ， 册 对 
它 自 身 应 用 margin: auto。 然 而 如 果 要 对 一 个 元 素 进 行 垂直 居中 ， 可 能 ; 
是 想 想 就 令 人 头皮 发 肪 了 了。 
多 年 以 来 ， 垂 直 居 中 已 经 成 为 了 CSS 领域 的 圣杯 了 “， 它 同样 也 是 前 端 开 
发 圈 内 广 为 流 传 的 笑话 。 原 因 在 于 它 同时 具备 以 下 几 条 特征 。 
四 它 是 极其 常见 的 需求 。 
图 从 理论 上 来 看 ， 它 似乎 极其 简单 。 
加 在 实践 中 ， 它 往往 难 如 登 天 ， 当 涉及 斥 才 不 固定 的 元 素 时 尤其 如 此 。 





(D 比喻 那些 只 存在 于 传说 中 的 物件 。 一 一 译 者 注 


40 垂直 居中 


长 久 以 来 ， 为 了 解决 这 一 绝世 难题 ， 前 端 开 发 者 们 列 精 痪 虞 ， 琢 采 出 了 
各 种 解决 方法 ， 大 多 数 并 不 实用 。 在 本 篇 攻略 中 ， 我 们 将 探索 现代 CSS 的 
强大 威力 ， 以 全 新 的 思路 去 攻克 各 种 场景 下 的 垂直 居中 难题 。 请 注意 ， 有 几 
种 技巧 十 分 流行 ， 但 在 这 里 并 不 会 深入 探讨 ， 原 因 如 下 。 

如 表格 布局 法 (利用 表格 的 显示 模式 ) 需要 用 到 一 些 匈 余 的 HTML 元 

系 ， 因 此 这 里 不 多 介绍 。 

图 行内 块 法 也 不 作 讨 论 ， 因 为 在 我 看 来 这 种 方法 hack 的 味道 很 浓 。 

如 果 你 有 兴趣 ， 可 以 去 看 看 Chris Coyier 写 的 “不 为 人 知 的 居中 方法 ” 
Chttp:Wcss-tricks.comy/centering-in-the-unknown)。 这 篇 出 色 的 文章 详细 讲述 了 
这 两 种 技巧 。 

除非 特别 注 明 ， 我 们 将 一 下 使 用 如 下 所 示 的 结构 代码 ， 并 直接 插入 
<body> 元 系 中 《但 实际 上 我 们 将 要 探索 的 这 些 技巧 是 与 容 融 无 天 的 ) : 





























Am | centered yet? 


<main> 
<h1>Am I centered yet?</h1> 
<p>Center me, please!</p> 
</main> 


Center me, pleasel 








然后 再 用 一 些 基 本 的 CSS 来 设置 育 景 、 内 边 距 等 样式 ， 就 可 以 得 到 图 
7-17 这 样 的 效果 。 我 们 将 以 此 作为 起 点 。 


基于 绝对 定位 的 解决 方案 


我 们 先 来 看 一 个 早期 的 垂下 居中 方法 ， 它 要 求 元 系 上 共有 固定 的 宽度 和 
度 : 


7-17 
我 们 的 起 点 








zi 


main { 
position: absolute; 
top: 56%; 
left: 56%; 
margin-top: -3em; /* 6/2 = 3 */ 
margin-left: -9em; /* 18/2 = 9 */ 
width: 18em; 
height: 6em; 
由 





这 段 代码 在 本 质 上 做 了 这 样 几 件 事情 : 先 把 这 个 元 素 的 左上 角 放 置 在 视 
口 (或 最 近 的 、 上 共有 定位 属性 的 祖先 元 系 〉 的 正中 心 ， 然 后 再 利用 负 外 边 距 
把 它 回 左 、 回 上 移动 〈 移 动 距离 相 当 于 它 目 号 宽 高 的 一 半 )， 从 而 把 元 素 的 
正中 心 放 置 在 视 口 的 正中 心 。 依 助 强大 的 calc() 图 数 ， 这 段 代 码 还 可 以 省 
挥 两 行 声 明 : 











main { 
position: absolute; 
top: calc(56% - 3em); 


left: calc(56% - 9em) ; 
width: 18em; 
height: 6em; 

| 





显然 ， 这 个 方法 最 大 的 局 限 在 于 它 要 求 元 素 的 宽 遍 是 固定 的 。 在 通 稼 情 
况 下 ， 对 那些 需要 居中 的 元 素来 说 ， 其 太 才 往往 是 由 其 内 容 来 决定 的 。 如 宋 
能 找到 一 个 属性 的 百分比 值 以 元 系 目 身 的 宽 高 作为 解析 基准 ， 那 我 们 的 难题 
就 迎 尺 而 解 了 ! 遗憾 的 是 ， 对 于 绝 大 多 数 CSS 属性 (包括 margin) 来 说 ， 
百分比 都 是 以 其 父 元 素 的 矿 才 为 基准 进行 解析 的 。 


CSS 领域 有 一 个 很 常见 的 现象 ， 真 正 的 解决 方 采 人 往往 来 目 于 我 们 最 
意 想 不 到 的 地 方 。 在 这 个 例子 中 ， 答 宁 来 日 于 CSS 变形 属性 。 当 我 们 在 
translate() 变形 也 数 中 使 用 百分比 值 时 ， 是 以 这 个 元 双 目 号 的 宽度 和 高 度 
为 基准 进行 换算 和 移动 的 ， 而 这 正 是 我 们 所 需要 的 。 接 下 来 ， 只 要 换 用 基于 
百分比 的 CSS 变形 来 对 元 素 进 行 偏 移 ， 就 不 需要 在 偏 移 量 中 把 元 条 的 尺寸 
写 死 了 。 这 样 我 们 就 可 以 彻底 解除 对 固定 尺寸 的 依赖 : 









































main { 
position: absolute; 
top: 506%; Ami centered 
left: 56% ; yet? 


Center me, please! 


transform: translate(-56%, -506%); 
) 











你 可 以 在 图 7-18 中 看 到 结果 : 这 个 容器 已 经 完美 居中 了 ， 完 全 满足 我 ”图 7-18 

们 的 期 望 。 利用 这 个 CSS 变形 技巧 ， 我 们 可 
人 i . 以 让 宽 高 不 固定 的 元 素 垂 直 居 中 
当然 ， 没 有 任何 技巧 是 十 全 十 美的 ， 上 面 这 个 方法 也 有 一 些 需要 注意 的 地 方 。 

国 我 们 有 时 不 能 选用 绝对 定位 ， 因 为 它 对 整个 布局 的 影响 太 过 强烈 。 

国 如 果 需 要 居中 的 元 素 已 经 在 高 度 上 超过 了 视 口 ， 那 它 的 顶部 会 被 视 
口 裁 切 掉 〈 人 参见 图 7-19)。 有 一 些 办 法 可 以 绕 过 这 个 问题 ， 但 hack 
味道 过 浓 。 

国 在 某 些 浏览 器 中 ， 这 个 方法 可 能 会 导致 元 素 的 显示 有 一 些 模 糊 ， 因 
为 元 素 可 能 被 放置 在 半 个 像素 上 。 这 个 问题 可 以 用 transform- 图 7-19 
style: preserve-3d 来 修复 ， 不 过 这 个 修复 手段 也 可 以 认为 是 一 个 ” 当 需 要 居中 的 元 素 在 高 度 上 超过 
hack， 而 且 很 难保 证 它 在 未 来 不 会 出 问题 。 了 袖口 时 ， 它 的 项 部 会 被 裁 挥 
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实践 证 明 ， 想 要 找到 最 先 提 出 这 个 实用 技巧 的 人 确实 不 容 势 ， 不 过 所 
能 挖 握 到 的 最 早起 源 似乎 是 Stack Overflow (http://stackoverflow.com) 的 用 
户 “Charlie”(http://stackoverflow.com/users/479836/charlie)， 他 在 2013 年 
4 月 16 日 回答 了 “如 何 使 用 CSS3 实现 垂直 对 齐 ”(http:/stackoverflow.comy/ 
a/16026893/90826) 这 个 问题 。 致敬 























Am | centered yet? 


Center me, please! 





7-20 

我 们 期 望 margin 的 百分比 值 可 
以 基于 视 口 的 尺寸 来 解析 ， 但 实 
际 上 这 是 行 不 通 的 


Am | centered yet? 


Center me, pleasel 
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把 项 部 外 边 距 设置 为 50vh 可 以 
解决 我 们 的 问题 ， 现 在 这 个 元 素 
已 经 正确 居中 了 


基于 视 口 单位 的 解决 方案 


假设 我 们 不 想 使 用 绝对 定位 ， 仍 然 可 以 采用 translate() 技巧 来 把 这 
个 元 系 以 其 日 映 宽 局 的 一 半 为 距离 进行 移动 ; 但 是 在 缺少 left 和 top 的 情 
况 下 ， 如 何 把 这 个 元 素 的 左上 角 放 置 在 容 融 的 正中 心 呢 ? 


我 们 的 第 一 反应 很 可 能 是 用 margin 属性 的 百分比 值 来 实现 ， 就 像 这 样 : 











main { 
width: 18em; 
padding: 1lem 1.5em; 
margin: 56% auto 6; 
transform: translateY(-56%) ; 
} 


不 过 ， 如 图 7-20 所 示 ， 这 段 代 人 码 会 产生 十 分 离谱 的 结果 。 原 因 在 于 
margin 的 百分比 值 是 以 父 元 素 的 宽度 作为 解析 基准 的 。 没 错 ， 即 使 对 于 
margin-top 和 margin-bottom 来 说 也 是 这 样 ! 

不 过 又 运 的 是 ， 如 果 只 是 想 把 元 系 相 对 于 视 口 进 行 居 中 ， 仍 然 是 有 项 
望 的 。CSS 值 与 单位 (第 三 版 〉(http://w3.org/TR/css-values-3/#viewport- 
relative-lengths〉 定 义 了 一 套 新 的 单位 ， 称 为 视 口 相关 的 长 度 单位 *。 

国 vw 是 与 视 口 宽度 相关 的 。 与 第 人 的 直觉 不 符 的 是 ，1vw 实际 上 表示 

视 口 宽 度 的 1%， 而 不 是 100%。 

四 与 vw 类 似 ，1vh 表示 视 口 高 度 的 1%。 

国 ” 当 视 口 宽度 小 于 高 度 时 ，1vmin 等 于 1vw， 和 否则 等 于 1vh。 

图 当 视 口 宽 度 大 于 高 度 时 ，1vmax 等 于 lvw， 否 则 等 于 1vh。 

在 我 们 的 这 个 例子 中 ， 适 用 于 外 边 距 的 是 vh 单位 : 











main { 
width: 18em; 
padding: 1lem 1.5em; 
margin: 56vh auto 6 ; 
transform: translateY(-506%); 
} 


在 图 7-21 中 可 以 看 到 ， 其 效果 堪 称 完 关 。 当 然 ， 这 个 拉 巧 的 实用 性 是 
相当 有 限 的 ， 因 为 它 只 适用 于 在 视 口 中 居中 的 场景 。 
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JU 使 用 视 口 相关 的 长 度 单位 ， 我 们 还 可 以 生成 一 个 正好 铺 满 视 口 的 区 块 ， 无 需 脚本 的 辅助 。 更 


多 细节 请 参阅 “用 一 行 CSS 实现 全 屏 区 块 ”(https://medium.com/@ckor/make-full-screen- 
Sections-with-1-line-of-css-b82227c7Scbd )。 





基于 Flexbox 的 解决 方案 


这 是 毋庸 置疑 的 最 佳 解 决 方案 ， 因 为 Flexbox《〈 伸 缩 盒 ) (http:/w3.org/ 
TR/css-flexbox) 是 专门 针对 这 类 需求 所 设计 的 。 我 们 之 所 以 要 讨论 其 他 方 
案 ， 仅 仅 是 因为 那些 方案 在 浏览 硕 的 文 持 程度 上 稍微 好 一 些 而 已 。 其 实 目前 
现代 浏览 右 对 Flexbox 的 支持 度 已 经 相当 不 错 了 。 

我 们 只 需 写 两 行 声 明 即 可 : 先 给 这 个 待 居 中 元 系 的 父 元 系 设 置 display: 
flex〔 在 这 个 例子 中 是 <body> 元 素 )， 再 给 这 个 元 素 自 身 设置 我 们 再 熟悉 不 
过 的 margin: auto (在 这 个 例子 中 是 <mainy> 元 素 ) : 




















body { 
display: flex; 
min-height: 166vh ; 
margin: 6; 


} 
main { 

margin: auto; 
} 


请 注意 ， 当 我 们 使 用 Flexbox 时 ，margin: auto 不 仅 在 水 平方 向 上 将 元 
素 居中 ， 垂 直方 向 上 也 是 如 此 。 还 有 一 点 ， 我 们 甚至 不 需要 指定 任何 宽度 〈 当 
然 ， 如 果 需 要 的 话 ， 也 是 可 以 指定 的 ) : 这 个 居中 元 素 分 配 到 的 宽度 等 于 max- 
content。(〈 还 记得 “ 自 适 应 内 部 元 素 ” 中 提 到 的 那些 内 部 尺寸 关键 字 吗 ? ) 

如 果 浏 览 需 不 文 持 Flexbox， 页 面 泻 染 结果 看 起 来 就 跟 我 们 的 起 点 
7-17 是 一 样 的 了 如果 设 置 了 宽度 的 话 )。 虽 然 没 有 垂直 居中 效果 ， 但 也 是 
完全 可 以 接受 的 。 

Flexbox 的 另 一 个 好 处 在 于 ， 它 还 可 以 将 匿名 容 需 《〈 即 没有 被 标签 包 囊 
的 文本 节点 ) 垂直 居中 。 举 个 例子 ， 假 设 我 们 的 结构 代码 是 : 








<main>Center me, please!</main> 


我 们 先 给 这 个 main 元 素 指 定 一 个 固定 的 尺寸 ， 然 后 借助 Flexbox 规范 
所 引入 的 align-items 和 justify-content 属性 ， 我 们 可 以 让 它 内 部 的 文 


关于 未 来 卫 下 二 
根据 盒 对 齐 模型 ( 第 三 版 ) ( http://w3.org/TR/css-align-3 ) 的 计划 ， 在 未 来 ， 对 于 简单 的 垂直 居中 需求 ， 
我 们 完全 不 需要 动用 特殊 的 布局 模式 了 。 因 为 只 需要 下 面 这 行 代 码 就 可 以 搞定 : 


: center., 


不 管 这 个 元 素 上 还 应 用 了 其 他 什么 属性 ， 这 样 瑟 就 够 了 。 这 听 起 来 可 能 如 美梦 一 般 令 人 难以 置信 ， 但 或 许 


你 手边 的 浏览 器 很 快 束 会 让 它 成 为 现实 | 
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本 也 实现 居中 ” (参见 图 7-22 ) : 


main { 
display: flex; 
align-items: Center; 
justify-content: center ; 
width: 18em; 
height: 16em; 





7-22 
用 Flexbox 还 可 以 把 匿名 的 文本 


EN 
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CSS 变形 
http://w3.org/TR/css-transforms 


CSS 值 与 单位 
http://w3.org/TR/css-values 


CSS 伸缩 盒 布 局 模型 
http://w3.org/TR/css-flexbox 
CSS 盒 对 齐 模 型 
http://w3.0org/TR/css-align 





Q@ 我 们 可 以 对 <body> 使 用 相同 的 属性 来 使 cmain> 元 素 居 中 ， 但 margin: auto 方法 要 更 加 优 
雅 一 些 ， 并 且 同 时 起 到 了 回 退 的 作用 。 


兮 第 7 章 结构 与 布局 


紧 贴 的 部 的 页 肢 





视 口 相关 的 长 度 单位 ( 参 抑 “垂直 居中 ”)，calc() 





难 匮 


在 网 页 设计 中 ， 存 在 一 个 相当 古老 但 又 相当 第 见 的 问题 ， 它 是 前 端 工程 
师 绕 不 开 的 坎 。 这 个 问题 可 以 简单 地 概括 如 下 : 有 一 个 具有 块 级 样式 的 页 脚 
(比如 它 设 置 了 背景 或 阴影 )， 当 页 面 内 容 足 够 长 时 人 它 一 切 正 第 ， 而 当 页 面 较 
短 时 (比如 错误 信息 页 面 ) 就 会 出 现 问 题 ”“。 此 时 的 问题 在 于 , 页 脚 不 能 像 我 
们 期 望 中 那样 “ 紧 贴 ”在 视 口 的 最 的 部 ， 而 是 紧 跟 在 内 容 的 下 方 。 


这 个 问题 不 仅 普 遍 存 在 ， 而 且 和 在 看 起 来 确实 相当 简单 。 因 此 ， 在 所 
有 “隐蔽 大 坑 ” 式 的 难题 中 >， 它 简直 就 是 教科 书 般 的 典型 案例 。 不 仅 如 此 ， 
CSS 2.1 基本 上 拿 它 没有 办 法 : 几乎 所 有 的 经 典 解 决 方 条 都 需要 给 页 脚 设置 
国定 的 高 度 ， 而 这 显然 是 不 健壮 的 ， 也 是 不 实际 的 。 此 外 ， 所 有 这 些 解决 方 
案 都 太 过 复杂 、 太 像 hack 了 ， 而 且 往 往 要 求 网 页 按照 特定 的 结构 来 写 。 在 
那个 年 代 ， 受 制 于 CSS 2.1 有 限 的 能 力 范 围 ， 这 已 是 我 们 所 能 达到 的 最 好 结 
果 了 。 不 过 ， 在 现代 CSS 的 协助 下 ， 我 们 可 以 做 得 更 好 吗 ? 如 果 答 案 是 肯 
定 的 ， 又 该 如 何 去 做 ? 


固定 高 度 的 解决 方案 
我 们 手头 的 这 个 页 面 极其 简单 ，<body> 元 素 内 的 结构 代码 如 下 所 示 : 




















J 具体 来 说 ， 当 页 面 内 容 的 长 度 小 于 视 口 高 度 减 去 页 脚 高 度 时 ， 这 个 问题 就 会 出 现 。 

Q 如 果 你 从 来 没有 在 这 个 大 坑 里 体验 过 狐 魔 的 快感 ， 那 不 妨 来 感受 一 下 前 人 针对 这 个 问题 所 积 
紫 下 来 的 宝 贯 财富。 在 CSS 第 三 版 规范 推出 之 前 ， 这 些 解 决 方案 曾经 挽救 过 一 个 又 一 个 的 网 
页 开发 者 : 


cssstickyfooter.com 








ryanfait.com/sticky-footer 
css-tricks.com/snippets/css/sticky-footer 
pixelsvsbytes.com/blog/2811/89/sticky-css-footers-the-flexible-way 
mystrd.at/modern-clean-css-sticky-footer 


最 后 两 个 解决 方案 是 这 众多 链接 中 最 为 精简 的 ， 但 仍然 有 其 局 限 之 处 。 
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察 贴 底部 的 页 脚 





Site name 


Bacon ipsum dolor sit amet turkey veniam shankle, 
cu short ribs kevin t-bone occaecat. Et laborum 
venison nostrud, ut veniam sint kielbasa ullamco 
pancetta. By drumstick tail, bacon leberkas shoulder 
capicola laborum. Minim ipsum bacon, mollit laboris 
t-bone pariatur Ham hock reprehenderit sint beef, 
sausage pig ciusmod t-bone shankle strip steak. 


Cow enim excepteur, boudin dolore lorem magna 
fugiat consequat voluptate. Picanha fugiat chicken, 
cupim aliquip magna filet mignon prosciutto ut 
nostrud. Kielbasa rump frankfurter sunt corned beef. 


pr er eer vie ro ee weve ene 
t-bone parniatur Ham ho 人 be 
sausage pig eiusmod t-bone shankle strip steak. 


Cow cnim cxcepteur, boudin dolore lorem magna 
id. Chicken sunt nisi tempor sed. In eiusmod non 
fatback tempor tenderloin pastrami adipisicing cow 
lorem ut tail jerky cupidatat venison. Jowl consequat 
commodo pork loin ipsum pork belly prosciutto aute 
beef, Ball tip shoulder aliqua, fugiat landjaeger kevin 
pork cho rei berkas hamburger cillum turkey 
ut doner culpa, 


© 2015 No rights reserved. 





Made with y by an anor 


ymous pastafarian, 


7-23 
这 是 一 个 简单 的 页 面 ， 当 内 容 足 
够 长 时 它 的 效果 


. 
Site name 
Bacon ipsum dolor sit amet turkey veniam shankle, 


culpa short ribs kevin t-bone occaecat. Et laborum 


venison nostrud, ut veniam sint. 


© 2015 No rights reserved. 


Made with ¥ by an 


nymous pastafari 
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页 脚 沉 不 到 压 的 问题 相当 严重 


@ 在 Cele 中 使 用 加 减法 时 


人 4 ee 
符 ER 条 怪 


wa 在 未 
来 的 某 个 时 候 ，calc() 内 部 可 能 
会 允许 使 用 关键 字 ， 那 么 CSS 解 
析 器 就 需要 有 依据 来 区 分 关键 字 
中 的 连 字 符 和 减 号 运算 符 。 


Site name 


Bacon ipsum dolor sit amet turkey veniam shankle, 
culpa short ribs kevin t-bonc occaccat. Et laborum 


venison nostrud, ut veniam sint. 


© 2015 No rights reserved. 





Made with ¥ by an anonymous pastafarian. 
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运用 CSS 的 计算 功能 将 
到 大 部 


页 脚 固定 


<header> 
<h1>Site name</h1> 
</header> 
<main> 
<p>Bacon Ipsum dolor sit amet.. 
<1-- eo 
</main> 
<footer> 
<p>@ 26015 No rights reserved.</p> 
<p>Made with YP by an anonymous pastafarian.</p> 
</footer> 


示意 文字 过 来 --></p> 


然后 我 们 给 页 面 加 上 一 些 基 本 样式 ， 再 给 页 脚 加 上 一 层 育 景 。 你 可 以 
在 图 7-23 中 看 到 它 的 样子 。 现 在 ， 让 我 们 把 页 面 内 容 缩 短 一 些 ， 结 果 如 图 
7-24 所 示 。 此 时 页 脚 沉 不 到 底 的 问题 就 完全 雁 露 出 来 了 ! 好 吧 ， 我 们 重 现 
了 这 个 问题 ， 但 是 该 如 何 解决 呢 ? 


假设 这 个 页 脚 的 文本 永远 不 可 能 折 行 ， 那 我 们 就 可 以 推算 出 它 实际 所 占 
的 高 度 : 
2 行 x 行 高 +3x 段落 的 垂直 外 边 距 + 页 脚 的 垂直 内 边 距 = 
2x1.5em+3xlem+1em=7em 
同样 ， 我 们 可 以 得 出 页 头 的 高 度 是 2.5em。 接 下 来 ， 借 助 视 口 相关 的 长 
度 单位 以 及 calc() 函数 ， 只 需 一 行 CSS 代码 就 可 以 表达 出 这 种 尺寸 关系 ， 
从 而 把 页 脚 “ 固 定 ” 到 底部 : 














main { 
min-height: calc(166vh - 2.5em - 7em); 
/* 避免 内 边 距 或 边框 搞 乱 高 度 的 计算 : * 
box-sizing: border-box; 


或 者 换个 方式 ， 我 们 可 以 把 <header> 和 <main> 元 系 包 在 一 个 容 髓 里 ， 
然后 在 算式 中 就 只 需要 考虑 页 脚 的 高 度 了 : 





#wrapper { 
min-height: calc(166vh - 7em) ; 


) 





这 个 方法 是 有 效 的 〈 人 参见 图 7-25)， 而 且 它 似乎 比 那些 需要 固定 高 度 的 
方案 还 要 稍 好 一 些 ， 主 要 好 在 它 的 代码 极其 精简 。 不 过 ， 如 果 页 面 布 局 不 是 
文 么 简单 的 话 ， 那 这 个 方法 就 完全 不 实用 了 。 它 不 仅 要 求 我 们 确保 页 脚 内 
的 文本 永远 不 会 折 行 ， 而 且 每 当 我 们 改变 页 脚 的 尺寸 时 ， 都 需要 跟着 调整 
min-height 值 (也 就 是 说 ， 这 不 够 DRY) ; 此 外 ， A 
内 容 主 体 套 一 层 额外 的 HTML 元 素 ， 否 则 还 要 跟着 页 头 的 尺寸 修改 。 想 必 
在 这 个 美好 的 新 时 代 ， 我 们 还 有 更 好 的 办 法 ， 对 吗 ? 
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更 灵活 的 解决 方案 


Flexbox 对 于 此 类 问题 同样 是 完美 的 选择 。 只 需 窗 容 几 行 CSS 代码 就 可 
以 完美 达成 十 分 灵活 的 布局 效果 ， 而 且 完 全 不 需要 复杂 的 计算 或 是 添加 多 余 
的 HTML 元 系 等 。 首 先 ， 我 们 需要 对 <body> 元 素 设 置 display: flex， 
为 它 是 这 三 个 主要 区 块 的 父 元 素 ， 当 父 元 素 获 得 这 个 属性 之 后 ， 就 可 以 对 其 
子 元 又 触发 “伸缩 盒 布 局 模型 ”我 们 还 需要 把 flex-flow 设置 为 column， 
否则 子 元 系 会 被 水 平 排放 在 一 行 上 〈 人 参见 图 7-26 ) : 

















body { 
display: flex; 
flex-flow: column; 


} 











此 时 ， 页 面 看 起 来 与 没有 启用 Flexbox 的 情况 似乎 是 一 样 的 ， 因 为 所 有 
元 条 部 占据 了 整个 视 口 的 宫 度 ， 而 它们 的 高 度 也 都 是 由 其 目 映 的 内 容 来 决定 
的 。 也 就 是 说 ， 我 们 还 没有 真正 发 挥 Flexbox 的 威力 。 


为 了 完全 释放 它 的 魔力 ， 我 们 首先 要 把 <body> 的 min-height 属性 指 
定 为 189vh， 这 样 它 就 至 少 会 占据 整个 视 口 的 高 度 。 不 过 ， 现 在 整个 页 面 的 
布局 仍然 跟 图 7-24 无 异 ， 原 因 在 于 ， 虽 然 我 们 已 经 为 整个 body 元 素 指定 了 
最 小 高 度 ， 但 各 个 子 元 素 的 高 度 仍 然 是 以 各 目的 内 容 为 准 的 (按照 CSS 规 
范 的 说 法 ， 它 们 的 高 度 仍 然 由 内 部 因素 来 决定 )。 


此 时 我 们 所 期 望 的 是 ， 页 头 和 页 脚 的 高 度 由 其 内 部 因素 来 决定 ， 而 内 容 
区 块 的 高 度 应 该 可 以 目 动 伸展 并 占 满 所 有 的 可 用 空间 。 我 们 只 要 给 <main> 
这 个 容 亲 的 flex 属性 指定 一 个 大 于 8 的 值 ( 比 如 1 即 可 )， 就 可 以 实现 这 个 
效果 了 了 : 























body { 
display: flex; 
flex-flow: column; 
min-height: 1606vh ; 
} 


main { flex: 1; } 


这 样 就 可 以 了 ! 我 们 只 需要 四 行 简 单 的 代码 ， 就 完美 实现 了 紧 贴 底部 的 
页 脚 (与 图 7-25 中 的 效果 一 致 )。Flexbox 是 不 是 相当 霸气 ? 
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向 Philip Walton (http://philipwalton.com) 脱 帆 致 效 ， 感 谢 他 提出 这 
个 技巧 (http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer)。 
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name 





图 7-26 
只 应 用 flex 而 没有 应 用 其 他 属 
性 时 ， 会 让 所 有 子 元 素 水 平 排列 





这 个 flex 属 性 实际 上 是 
flex-grow、flex-shrink 和 
flex-basis 的 简写 语法 。 任 何 
元 素 只 要 设置 了 一 个 大 于 0 的 
flex 值 ， 就 将 获得 可 伸缩 的 特 
性 ; flex 的 值 负责 控制 多 个 可 伸 
缩 元 素 之 间 的 尺寸 分 配 比 例 。 举 
例 来 说 ， 在 我 们 眼前 的 这 个 例子 
中 ， 如 果 <main> 是 flex: 2 而 
<footer> 是 flex: 1， 那 么 内 容 
区 块 的 高 度 将 是 页 脚 高 度 的 两 倍 。 
如 果 把 它们 的 值 从 2 和 1 改 为 4 
和 2， 结果 也 是 一 样 的 ， 因 为 真 
正 起 作用 的 是 它们 的 数值 比例 。 





致 租 


CSS 伸缩 盒 布 局 
http://w3.0rg/TR/css-flexbox 相关 规范 


CSS 值 与 单位 
http://w3.org/TR/css-values 





全 第 7 章 结构 与 布局 








缓 动 效 末 


基本 的 CSS 过 渡 ， 基 本 的 CSS 动画 





难 匮 


给 过 渡 和 动画 加 上 组 动 效 末 〈 比 如 具有 回 弹 效 果 的 过 渡 过 程 ) 是 一 种 流 
行 的 表现 手法 ， 可 以 让 界面 显得 更 加 生动 和 真实 : 在 现实 世界 中 ， 物 体 从 A 
点 到 B 点 的 移动 往往 不 是 完全 勾 速 的 。 


以 纯 技 术 的 角度 来 看 ， 回 弹 效果 是 指 当 一 个 过 渡 达 到 最 终 值 时 ， 往 回 
倒 一 点 ， 然 后 再 次 回 到 最 终 值 ， 如 此 往复 一 次 或 多 次 ， 并 逐渐 收 伍 ， 最 终 稳 
定 在 最 终 值 。 举 个 例子 ， 假 设 要 用 一 个 元 素来 模拟 一 个 下 落 的 小 球 “〈 人 参见 图 
8-1)， 我 们 会 把 transform 属性 “从 none 过 渡 到 translateY(356px) 来 模 
拟 这 个 下 落 过 程 。 

实际 上 ， 回 弹 效 果 并 不 只 对 位 移动 画 有 和 帮助。 对 几乎 所 有 类 型 的 过 渡 动 
夯 来 说 ， 它 都 可 以 显著 增强 动画 的 体验 ， 其 中 包括 : 


国 尺寸 变化 (比如: 元素 在 :hover 时 变 大 ， 弹 出 框 从 transform: 
scale(6) 的 状态 开始 放大 显示 ， 柱 状 图 中 的 每 根 柱 子 动态 地 冒 出 
> 

加 角度 变化 (比如 : 元 床 的 旋转 动作 ， 人 饼 图 中 的 各 个 刷 区 以 动画 的 方 
式 从 0* 开 始 展开 为 实际 大 小 ， 等 等 ) 

有 相当 多 的 JavaScript 类 库 可 以 创建 动画 ， 且 内 置 回 弹 效果 。 但 在 眼 

下 ， 我 们 其 实 已 经 不 需要 伟 助 脚本 来 实现 过 渡 和 动画 了 。 不 过 ， 在 CSS 中 
实现 回 弹 效果 的 最 佳 方 式 是 什么 呢 ? 





























QD 为 什么 在 这 里 采用 变形 属性 来 表现 物体 的 下 落 ， 而 不 是 类 似 top 或 margin-top 这 样 的 属 
性 ? 在 编写 本 书 时 ， 变 形 属性 的 动画 过 程 更 加 流畅 ， 而 其 他 CSS 属性 由 于 需要 对 齐 到 像素 ， 
往往 略 显 生硬 。 








Sem 
弹跳 动画 
我 们 的 第 一 感觉 可 能 就 是 使 用 CSS 动画 ， 并 设置 如 下 关键 帧 ， 





@keyframes bounce { 
66%，862%，to { transform: translateY(356px); } 
76% { transform: translateY(256px); } 
96% { transform: translateY(366px); } 


) 

.ball { 
/* 尺寸 样式 、 颜 色 样 式 等 */ 
animation: bounce 3s; 

} 








这 上段 代码 所 描述 的 关键 帧 正好 对 应 了 图 8-1 中 的 每 一 个 阶段 。 但 是 ， 如 
末 你 跑 一 饥 这 个 动画 ， 会 发 现 它 显得 很 不 真实 。 主 要 原因 在 于 ， 每 当 这 个 小 
球 改 变 运 动 方 加 时 ， 它 的 移动 过 程 郡 是 持续 加 速 的， 这 看 起 来 很 不 自然 。 产 
生 这 个 结果 的 原因 在 于 ， 它 的 调 速 函 数 在 所 有 关键 帧 的 衔接 中 都 是 一 样 的 。 


你 可 能 会 问 :“ 它 的 调 速 …… 什 么 ? ”所 有 过 渡 和 动画 都 是 跟 一 条 曲线 
有 天 的 ， 这 条 曲线 指定 了 动画 过 程 在 整 段 时 间 中 是 如 何 推进 的 〈 它 在 东 些 





8-1 
一 个 逼真 的 弹跳 动作 





























(50%, 80%) 
























































和 
图 8-2 
所 有 过 渡 和 动画 的 默认 调 速 


(ease) 


函数 


8-3 
其 他 内 置 的 调 速 函数 ， 及 其 对 应 
的 关键 字 


语 境 下 也 被 称 作 “ 绥 动 曲线 ”)。 如 果 不 指定 调 速 涵 数 ， 它 就 会 得 到 一 个 默 
认 值 。 这 个 默认 的 组 动 效 末 并 不 是 我 们 想像 中 的 匀速 效果 ， 而 是 如 图 8-2 所 
示 。 请 注意 (图 8-2 中 粉色 圆 点 所 在 的 位 置 )， 当 时 间 进 行 到 一 半 时 ， 这 个 
过 渡 已 经 推进 到 80% 了 ! 





不 论 是 在 animation/transition 从 写 属 性 中 ， 还 是 在 animation- 
timing-function/transition-timing-function 展开 式 属 性 中 ， 你 都 可 以 
把 这 个 默认 的 调 速 函 数 显 式 指定 为 ease 关键 字 。 不 过 ， 由 于 ease 本 来 就 是 
默认 值 ， 这 样 做 并 没有 什么 实际 用 处 。 除 此 以 外 ， 还 有 四 种 内 置 的 缓 动 曲线 
(如 图 8-3 所 示 )， 你 可 以 用 它们 来 改变 动画 的 推进 方式 。 









(50%, 68%) 








(50%, 32%) 






i CD 


时 间 时 间 


(50%, 50%) (50%, 50%) 





地 地 
时 间 时 间 





如 你 所 见 ，ease-out 是 ease-in 是 反 向 版 本 。 这 一 对 组 合 正 好 是 实现 
回 弹 效果 所 需要 的 ， 每 当 小 球 的 运动 方向 相反 时 ， 我 们 希望 调 速 函 数 也 是 相 
反 的 。 因 此 ， 我 们 可 以 在 animation 属性 中 指定 一 个 通用 的 调 速 函数 ， 然 
后 在 关键 帧 中 按 需 覆盖 它 。 我 们 乔 望 下 落 方向 上 的 调 速 另 数 是 加 速 的 (ease- 
out )， 而 弹 起 方 喇 上 是 减速 的 (ease-in): 











@keyframes bounce { 
66%, 86%, to { 


transform: translateY(466pX) ; 
animation-timing-function: ease-out; 
1 
76% { transform: translateY(366pXx); } 
96% { transform: translateY(366px); } 


} 
.ball { 
/* 其 余 样 式 写 在 这 里 */ 
animation: bounce 3s ease-in; 
} 





如 采 你 试看 运行 这 段 代 码 ， 就 会 发 现 ， 虽 然 这 个 改动 很 小 ， 但 明显 让 问 
弹 效 灯 变 得 真实 起 来 。 不 过 ， 这 五 种 内 置 的 绥 动 曲线 明显 不 够 用 。 如 下 我 们 
可 以 按照 自己 的 需要 来 选择 任意 的 调 速 图 数 ， 那 应 该 可 以 实现 更 加 真实 的 效 
果 。 举 个 例子 ， 如 果 这 个 回 弹 动 画 是 用 来 模拟 目 由 落体 的 ， 那 么 一 个 更 高 的 
加 速度 (类 似 ease 所 提供 的 效果 ) 应 该 可 以 产生 出 一 种 更 加 真实 的 效果 。 
不 过 ， 如 果 没 有 对 应 的 关键 字 可 用 ， 要 如 何 得 到 ease 的 反 向 版 本 呢 ? 


所 有 这 五 种 曲线 都 是 通过 (三 次 ) 贝 塞 尔 曲线 来 指定 的 。 我 们 可 以 在 任 
意 一 种 矢量 绘图 软件 〈 比 如 Adobe Illustrator〉 中 处理 贝 塞 尔 曲 线 。 这 种 曲线 
由 一 定数 量 的 路 径 片 断 所 组 成 ， 各 个 片断 的 每 一 问 都 可 以 由 一 个 手柄 来 控制 
曲率 〈 这 些 手 柄 通常 也 被 称 作 控制 锚 点 )。 一 条 复杂 的 曲线 可 能 包含 很 多 个 
片断 ， 这 些 族 断 的 端点 彼此 相连 构成 了 整 条 曲线 〈 人 参见 图 8-4)。 但 CSS 的 
调 速 闻 数 都 是 只 有 一 个 片断 的 贝 塞 尔 曲 线 ， 因 此 每 个 调 速 洱 数 只 有 两 个 控制 
锚 点 。 举 个 例子 ， 你 可 以 在 图 8-5 中 看 到 默认 调 速 油 数 (ease) 以 及 它 的 控 
制 销 点 。 


作为 对 上 述 五 种 预定 义 曲 线 的 补充 ，CSS 提供 了 一 个 cubic-bezier() 
中 数 ， 人 允许 我 们 指定 自 定义 的 调 速 水 数 。 它 接受 四 个 参数 ， 分 别 代表 两 个 控 
制 销 点 的 坐标 伸 ， 我 们 通过 这 两 个 控制 销 点 来 指定 想 要 的 贝 宪 尔 曲 线 。 语 
法 形式 是 这 样 的 : cubic-bezier(x1，y1，x2，y2)， 其 中 Co, y) 表示 第 一 
个 控制 销 点 的 坐标 ， 而 Co, yy») 是 第 二 个 。 曲 线 片 断 的 两 个 端点 分 别 固定 在 
(6,8) 和 (1,1)， 前 者 是 整个 过 渡 的 起 点 《时间 进 度 为 索 ， 动 男 进 度 为 去)， 
后 者 是 终点 《时 间 进 度 为 100%， 动 画 进度 为 100% )。 


请 注意 ， 固 定 曲 线 的 两 个 并 点 并 不 是 唯一 的 限制 。 为 外 ， 两 个 控制 销 操 
的 x 值 都 被 限制 在 [0, 1] 区 间 内 《“ 即 我 们 无 法 把 手柄 在 水 平方 向 上 移出 这 个 
图 形 范围 )。 这 个 限制 并 不 是 随便 加 上 的 。 由 于 我 们 《目前 ) 无 法 穿越 时 间 ， 
因此 无 法 指定 这 样 一 个 过 渡 : 在 被 触发 之 前 就 开始 了 ， 或 者 在 时 间 用 完 之 后 
仍然 没有 结束 。 这 里 真正 的 限制 是 节点 的 数量 : 曲线 只 能 有 两 个 节点 ， 这 上 明 
显 限 制 了 它 的 能 力 ， 但 也 让 cubic-bezier() 函数 易于 使 用 。 尽 管 这些 限 制 
确实 存在 ， 但 cubic-bezier() 所 能 创造 出 的 可 能 性 已 经 相当 可 观 了 。 


从 逻辑 上 来 说 ， 只 要 我 们 把 控制 锚 点 的 水 平 坐 标 和 垂直 坐标 互 换 ， 就 
可 以 得 到 任何 调 速 函 数 的 反 向 版 本 。 这 一 点 对 关键 字 也 是 适用 的 ， 上述 所 















































8-4 
用 三 次 贝 塞 尔 曲线 画 出 的 螺旋 线 ， 
标示 出 了 各 个 节点 和 控制 错 点 


时 间 
图 8-5 


调 速 涵 数 ease 的 市 点 和 控制 锚 点 








有 五 个 关键 字 都 有 其 对 应 的 cubic-bezier() 形式 的 仁 。 举 例 来 说 ，ease 
等 同 于 cubic-bezier(.25,.1,.25,1)， 因 此 它 的 反问 版 本 就 是 cubic- 
bezier(.1,.25,1, .25)， 如 图 8-6 所 示 。 通 过 这 种 方法 ,我 们 的 回 弹 动画 就 
可 以 使 用 ease 了， 并 且 看 起 来 更 加 真实 : 


@keyframes bounce { 
606%, 86%, to { 
transform: translateY(4606px); 
animation-timing-function: ease; 
] 
76% { transform: translateY(366px); } 
96% { transform: translateY(3606px); } 








} 
0%, 30%) .ball { 
BE 4 
a animation: bounce 3s cubic-bezier(.1,.25,1, .25); 
} 
时 间 
人 借助 一 球 类 似 cubic-bezier.com 的 图 形 化 工具 (参见 图 8-7)， 我 们 可 
ease 调 速 浮 数 的 反 向 版 本 以 反复 尝试 和 优化 ， 从 而 进一步 改进 这 个 回 弹 动画 。 
本 En play.csssecrets.io/bounce 
在 Dan We /daneden.me) 编写 的 animate.css 动画 库 中 ， 
所 用 到 的 调 速 函数 分 别 是 cubic-bezier(.215,.61,.355,1) 和 cubic- 
oo a 它 的 曲线 
更 加 陡峭 ， 效 果 也 更 加 逼真 )。 
致敬 
cubic-bezier(.82, .14, .34, .93) 二 
8-7 | 
三 次 贝 塞 尔 曲线 有 一 个 饱 受 诉 病 的 Preview & compare 
缺点 上 :在 没有 可 视 化 界面 的 情况 Duration: 所 末 1 second 





下 ， 它 极 难 编辑 和 理解 用 于 描述 


CSS 动画 的 调 速 函数 时 更 是 如 此 。 
不 过 竺 运 的 是 ， 有 一 些 在 线 工 具 是 


专门 为 此 而 生 的， 比如 由 笔者 倾情 











\ 上 秆 a 
打造 的 cubic-bezier.com Library 
蓓 Click on a curve to compare it with the current one. 

起 

摆 

pa 

时 间 

ease Ss-IN-OUt 
double b… bounce … mid pause accelerat-: 


Tip: Right click on any library curve and select “Copy Link Address” to get a permalink to it which you 
can share with others 


弹性 过 渡 


假设 有 一 个 文本 输入 框 ， 每 当 它 被 肾 焦 时 ， 虱 需要 展示 一 个 提示 框 。 这 
个 提示 框 用 来 癌 用 户 提供 帮助 信息 ， 比 如 字段 值 的 正确 格式 等 。 绪 构 代 码 可 
能 是 这 样 的 : 





<label> 
Your username: <input id="username" /> 
<span class="callout">Only letters, numbers, 
underscores ( ) and hyphens (-) allowed!</span> 
</label> 


Your username: Your username: 


| leaverou | | leaverolu | 


Your username: 


leaverou 


a 


Your username: 


| leaverou ] 


Only letters, numbers, underscores 
(_) and hyphens (-) allowed! 


Your username: 


| leaverol | 


Only letters, numbers, underscores 
(L) and hyphens (-) allowed! 


Your username: 


| leaveroh | 





触发 这 个 提示 框 〈.callout) 所 需要 的 CSS 代码 如 下 所 示 〈 我 们 在 这 
里 略 去 了 具体 的 外 观 和 布局 样式 ): 











input:not(:focus) + .callout { 
transform: scale(0); 


} 
.Callout { 
transition: .5s transform; 
transform-origin: 1.4em -.4em; 
h 








日 前 ， 当 用 户 肾 焦 到 这 个 文本 输入 框 时 ， 会 有 一 个 半 秒 钟 的 过 渡 ， 如 
图 8-8 所 示 。 这 个 过 渡 没 有 什么 问题 ， 但 如 果 它 在 结尾 时 能 再 会 张 一 点 的 
话 ， 会 显得 更 加 自然 和 生动 (比如 说 ， 先 扩大 到 110% 的 矿 寸 ， 然 后 再 缩 回 
100%)。 我 们 可 以 把 这 个 过 渡 改 成 一 个 动画 ， 然 后 用 上 我 们 在 前 一 段 所 学 到 
的 东西 : 











@keyframes elastic-grow { 
from { transform: scale(6); } 
706% { 
transform: scale(1.1); 
animation-timing-function: 
cubic-bezier(.1,.25,1,.25); /* 有 反 人 向 的 ease */ 


} 


input:not(:focus) + .callout { transform: scale(6); } 


如 果 你 打算 用 height 而 不 
是 变形 属性 来 实现 提示 框 的 展示 
动画 ， 可 能 会 发 现 从 height: 6 
( 或 其 他 值 ) 到 height: auto 的 
过 渡 并 不 会 生效 。 这 是 因为 auto 
是 一 个 关键 字 ， 无 法 解析 为 一 个 
可 动画 的 值 。 在 这 种 场景 下 ， 可 
以 改 为 对 max-height 属性 进行 
过 渡 ， 并 给 这 个 属性 指定 一 个 足 
够 大 的 值 来 作为 展示 状态 。 


8-8 
这 个 过 渡 动 画 最 开始 看 起 来 是 这 


样 的 


8-9 
如 果 给 这 个 过 渡 加 入 一 些 弹 性 的 
感 殉 ，UI 会 显得 更 加 真实 和 生动 





(70%, 110%) 


(50%, 100%) 


局 
时 间 


8-10 
这 个 自 定义 的 调 速 函数 在 垂直 坐 
标 上 已 经 超出 0~1 区 间 了 





input:focus + .callout { animation: elastic-grow .5s; } 


.Callout { transform-origin: 1.4em -.4em; } 


动手 尝试 之 后 ， 我 们 就 会 看 到 这 个 改动 确实 发 挥 了 作用 。 你 可 以 在 图 
8-9 中 看 到 它 的 效果 ， 不 妨 与 前 一 个 过 渡 对 比 一 下 。 不 过 ， 这 里 其 实 上 只 是 逢 
要 一 个 过 渡 而 已 ， 而 我 们 本 质 上 使 用 了 一 个 动画 。 动 夯 确 实 更 加 强大 ， 但 在 
这 个 场景 中 ， 我 们 所 第 要 的 其 实 只 是 给 这 个 过 渡 加 入 一 些 弹 性 的 感觉 ， 因 此 
动画 在 这 里 显得 大 材 小 用 了 ， 有 一 种 杀 鸡 用 牛刀 的 感觉 。 有 没有 可 能 只 用 过 
渡 束 做 出 这 个 效 来 呢 ? 
































Your username: Your username: Your username: Your username: 


leaverou | leaverou leaveroh | | leaveroh 


CVT 
par Onir iron mn ooeraory 
(asd yn we 





Your username: Your username: Your username: Your username: 
| leaverol | leaverou | leaverou | | leaverou | 
Only letters, numbers, underscores | , 
加 和 ER 上 站 Only letters, numbers, underscores Only letters, numbers, underscores Only letters, numbers, underscores 
() and hyphens (-) allowed! (_) and hyphens (-) allowed! () and hyphens (-) allowed! 


这 个 问题 的 解决 方案 仍然 来 目 于 目 定 义 调 速 男 数 cubic-bezier()。 到 
目前 为 止 ， 我 们 只 是 讨论 了 曲线 的 控制 锚 点 处 在 0~1 区 间 内 的 情况 。 前 面 
曾经 提 到 过 ， 我 们 无 法 在 水 平方 各 上 超越 这 个 范围 ， 至 少 在 时 光 机 发 明之 前 
是 不 可 能 的 ; 但 我 们 可 以 在 垂直 方向 上 突破 0~1 区 间 ， 从 而 让 过 渡 达 到 低 
于 0 或 高 于 100% 的 程度 。 你 能 猜 到 这 意味 春 什么 吗 ? 它 表 示 如 有 果 我 们 要 从 
scale(6) 的 变形 程度 过 渡 到 scale(1)， 束 还 将 经 历 一 个 比 最 终 值 更 大 的 状 
态 ， 比 如 scale(1.1) (或 者 更 其 ,这 取决 于 幸 速 疯 数 有 多 陡 )。 


在 这 个 例子 中 ， 我 们 只 想 加 入 一 点 弹性 效果 ， 因 此 希望 调 速 水 数 可 以 先 
达到 110% 的 程度 (相当 于 scale(1.1))， 然 后 再 过 渡 回 100%。 让 我 们 从 
初始 的 调 速 员 数 ease (cubic-bezier(.25,.1,.25,1)) 开始 ， 然 后 把 第 二 
个 控制 销 点 同上 移 ， 下 至 调 到 类 似 cubic-bezier(.25,.1,.3,1.5) 的 程度 。 
在 图 8-10 中 可 以 看 到 ， 现 在 这 个 过 渡 会 在 总 时 长 50% 的 时 间 点 达到 100% 
的 变形 程度 。 不 过 ， 过 渡 过 程 并 不 会 停 在 那里 ;， 它 会 在 超越 最 终 值 之 后 继 
续 推 进 ， 在 70% 的 时 间 点 达到 110% 的 变形 程度 峰值 ， 然 后 在 最 后 可 用 的 
30% 时 间 里 过 渡 回 它 的 最 终 值 。 可 见 ， 整 个 过 渡 的 推进 过 程 非 常 接近 前 面 
的 动画 方案 ， 但 它 只 需要 一 行 代码 就 可 以 实现 整个 效果 。 我 们 把 代码 列 在 下 
面 ， 作 为 对 比 : 














input:not(:focus) + .callout { transform: scale(6); } 


.Callout { 
transform-origin: 1.4em -.4em; 
transition: .5s cubic-bezier(.25,.1,.3,1.5); 














尽管 这 个 提示 框 在 展示 过 程 中 的 过 渡 效 果 看 起 来 是 符合 预期 的 ， 但 是 当 
输入 框 失 去 焦点 、 提 示 框 收缩 并 消失 时 ， 这 个 过 渡 过 程 束 不 是 我 们 所 期 望 的 
结果 了 参见 图 8-11)。 这 到 底 是 怎么 回 事 ?! 这 个 结 末 似乎 在 我 们 意料 之 
外 ， 但 其 实 也 在 情理 之 中 : 当 我 们 把 焦点 从 输入 框 中 切 出 去 的 时 候 ， 所 触发 
的 过 渡 会 以 scale(1) 作为 起 始 仁 ， 并 以 scale(8) 作为 最 终 值 。 由 于 此 时 
是 相同 的 调 速 函数 在 起 作用 ， 这 个 过 渡 仍 然 会 在 350ms 后 到 达 110% 的 变形 
程度 。 只 不 过 在 这 里 ，110% 变形 程度 的 解析 结果 并 不 是 scale(1.1)， 而 是 
scale(-6.1) ! 





Your username: Your username: Your username: 


leaverou leaverou leaverou 





Only letters, numbers, UnGerscorcs 


Only letters, numbers, underscores Cd hy ons Callome 


Only letters, numbers, underscores 
and hyphens (-) allowed! 


人) and hyphens (-) allowed! 


Your username: Your username: Your username: 


leaverou leaverou (ee 
D1? 
加 硬 


不 过 也 别 灰 心 ， 因 为 修复 这 个 问题 不 过 是 多 加 一 行 代码 而 已 。 假 设 我 们 
只 想 给 提示 框 的 关闭 过 程 指定 普通 的 ease 调 速 水 数 ， 那 么 可 以 在 定义 关闭 
状态 的 CSS 规则 中 把 当前 的 调 速 阴 数 禾 新 掉 : 





input:not(:focus) + .callout { 
transform: scale(0); 


} 
.Callout { 

transform-origin: 1.4em -.4em; 

transition: .5s cubic-bezier(.25,.1,.3,1.5); 
py 








这 时 候 再 试 一 坛 ， 就 会 发 现 提示 框 关 财 的 过 程 已 经 恢复 到 我 们 设置 日 定 
义 cubic-bezier() 负数 之 前 的 样子 了 了， 而 它 的 展开 过 程 仍 然 保 留 了 我 们 想 
要 的 弹性 效果 。 


细心 的 读者 可 能 还 会 发 现 另 一 个 问题 : 提示 框 的 关闭 动作 明显 要 迟钝 一 
些 。 这 又 是 为 什么 呢 ? 我 们 来 仔细 想 想 看 。 在 提示 框 的 展开 过 程 中 ， 当 时 间 
进行 到 50% 时 〈 即 250ms 之 后 )， 它 就 已 经 达到 100% 的 完整 尺寸 了 。 但 
在 收缩 的 过 程 中 ， 从 0 到 100% 的 变化 会 花费 我 们 为 过 渡 所 指定 的 所 有 时 间 
(500ms )， 因 此 感觉 上 会 慢 一 半 。 


要 修复 这 个 问题 ， 只 需 同时 窗 盖 过 渡 的 持续 时 间 即 可 : 我 们 既 可 以 单独 
复 盖 transition-duration 这 一 个 属性 ， 也 可 以 用 transition 这 个 售 写 属 
性 来 覆盖 所 有 的 值 。 如 果 选 择 后 者 的 话 ， 束 不 需要 显 式 指定 ease 了 ， 因 为 











图 8-11 
这 到 底 是 怎么 回 事 


图 8-12 

以 国 ~gb(166%， 86%， 46%) 和 
国 ~gb(56%， 56%， 56%) ( 即 灰 
色 gray ) 这 两 种 颜色 为 例 ， 我 们 
用 cubic-bezier(.25,.1,.2,3) 
这 个 调 速 函 数 进行 弹性 过 渡 会 得 
到 这 样 的 结果 。RGB 三 个 通道 
的 值 是 独立 进行 插值 运算 的 ， 
此 这 个 过 渡 过 程 中 可 能 会 产生 国 
rgb(6%，166%，66%) 这 样 怪异 的 
颜色 。 你 可 以 到 play.csssecrets. 
io/elastic-color 杀身 体验 





说 到 把 过 渡 的 作用 苑 围 限 制 
在 特定 属性 上 ， 你 甚至 可 以 通过 
transition-delay 属性 把 各 个 
属性 的 过 渡 过 程 排 成 列队 ， 这 个 
属性 的 值 实际 上 就 是 transition 
简写 属性 中 的 第 二 个 时 间 值 。 举 
例 来 说 ， 如 果 width 和 height 
都 需要 过 渡 效 果 ， 而 且 你 希望 高 
度 先 变化 然后 宽度 再 变化 ( 很 
多 弹出 框 脚本 库 已 经 把 这 种 动画 
效果 推广 开 来 了 )， 就 可 以 这 样 
与 : transition: .5s height, 
.8s .5s width; ( 也 就 是 说 ， 
让 width 过 渡 的 延 时 正好 等 于 
height 过 渡 的 持续 时 间 ] )。 


它 本 来 就 是 初始 值 : 


input:not(:focus) + .callout { 


transform: 
) 
.Callout { 
transition: 
} 





scale(0); 


transform-origin: 1.4em -.4em; 


.5s cuUbic=bezier(.25,.1,.3,1.5); 





虽然 弹性 过 渡 在 很 多 种 类 的 过 渡 中 都 可 以 收 到 不 错 的 效果 (比如 本 节 
“难题 ”中 的 那些 例子 )， 但 在 某 些 时 候 它 产生 的 结果 可 能 会 相当 糟糕 。 典 型 


的 反面 案例 出 现在 对 颜色 属性 的 弹性 过 小 中 。 ee 全 过 波 的 
和 是 


结 末 可 能 会 相当 有 趣 〈 参 见 图 8-12)， 但 这 种 效果 在 UI 场景 


适 的 。 





A 


为 避免 不 小 心 对 颜色 设置 了 弹性 过 渡 ， 可 以 尝 eh 
限制 在 某 几 种 特定 的 属性 上 ， 而 不 是 像 以 前 那样 什么 都 不 指定 。 当 我 们 在 
transition 简写 属性 中 不 指定 任何 属性 时 ， A 怠 会 得 
到 它 的 初始 值 : al1l。 这 意味 春 只 要 是 可 以 过 渡 的 属性 ， 都 会 参与 过 渡 。 因 
此 ， 如 果 我 们 以 后 在 提示 框 打开 状态 的 样式 规则 中 增加 一 行 background 声 
明 ， 那 么 弹性 过 渡 也 会 作用 在 这 个 属性 上 。 所 以 最 终 完 美 版 的 代码 应 该 是 这 


样 的 : 
Input:not(:focus) + .callout { 
transform: scale(6) ; 
transition: .25s Snsfofn; 
} 
.Callout { 
transform-origin: 1.4em -.4em; 
transition: .5s cubic-bezier(.25,.1,.3,1.5) Fanstonn; 
} 


play.csssecrets.io/elastic 


四 CSS 过 渡 
http://w3.org/TR/css-transitions 

图 CSS 动画 
http://w3.0org/TR/css-animations 


基本 的 CSS 动画 ,，“ 缓 动 效果 - 





难题 

在 很 多 时 候 ， 我 们 需要 一 个 很 难 《〈 或 不 可 能 ) 只 通过 某 些 CSS 属性 的 
过 渡 来 实现 的 动画 。 比 如 一 段 卡通 影片 ， 或 是 一 个 复杂 的 进度 指示 框 。 在 这 
种 场景 下 ， 基于 图 片 的 逐 帆 动画 才 是 完美 的 选择 ; 不 过 想 在 网 页 中 以 一 种 灵 commented lin dabblet’s tii 
活 的 方式 来 实现 这 种 动画 ， 可 谓 是 一 项 恢 人 的 挑战 。 

时 06 ; 

看 到 这 里 ， 你 可 能 会 产生 这 样 一 种 疑问 :“ 难 道 不 能 用 GIF 动画 吗 ? ” tinear-gradient(45deg, #f06, yellow) 

对 大 多 数 情 况 来 说 ， 答 案 是 “能 ” GIF 动画 可 以 完美 胜任 。 但 是 ，GIF 动 图 8-13 








画 也 有 一 些 短 板 ， 在 某 些 场景 下 可 能 会 让 整体 效果 大 打折 扣 。 半 透 明 的 加 载 提 示 ( 来 自 dabblet 
本 com 网 站 ) ， 这 个 效果 用 GIF 动画 
国 GIF 图 片 的 所 能 使 用 的 颜色 数量 被 限制 在 256 色 。 是 无 法 实现 的 


图 8-14 

旋转 菊花 所 需要 的 八 帧 画面 已 
经 合并 到 一 起 了 ( 图 片 尺寸 为 
800 x 100 ) 


加 GIF 不 具备 Alpha 透明 的 特性 。 当 我 们 不 确定 GIF 动画 的 下 层 是 什 
么 时 ， 这 往往 是 一 个 大 问题 。 比 如 对 于 加 载 提 示 来 说 ， 半 透明 效果 
是 十 分 常见 的 (参见 图 8-13 )。 
加 我 们 无 法 在 CSS 层面 修改 动画 的 某 些 参 数 ， 比 如 动画 的 持续 时 间 、 
循环 次 数 、 是 否 暂 停 等 。GIF 动画 一 旦 生成 ， 上 述 所 有 参数 就 固定 
在 文件 内 部 了 ; 如 采 想 作 修 改 ， 就 只 能 动用 图 像 处 理 软 件 去 重新 生 
成 一 个 GIF 文件 。 从 可 移植 性 的 角度 来 看 ， 这 种 特性 确实 不 错 ， 但 
对 调试 过 程 来 说 相当 不 便 。 
2004 年 ，Mozilla 发 起 了 一 个 建议 : 在 PNG 格式 中 增加 对 逐 帧 动画 
的 支持 ， 就 像 GIF 格式 同时 文 持 静 态 图 像 和 动画 一 样 。 这 种 格式 被 称 作 
APNG。 它 在 设计 时 就 考虑 到 了 如 何 问 后 兼容 它 会 把 动画 的 第 一 帧 画面 以 
传统 PNG 文件 的 方式 进行 编码 ， 因 此 对 于 那些 不 支持 APNG 特性 的 旧版 看 
图 软件 来 说 ， 至 少 可 以 把 第 一 帧 正常 显 示 出 来 。 尺 管 看 起 来 大 有 前 途 ， 但 
APNG 并 没有 获得 足够 的 推广 。 时 至 今日 ， 只 有 极 少数 的 浏览 各 和 图 像 处 理 
软件 支持 这 种 格式 ，。 
网 页 开发 者 甚至 动用 过 JavaScript 在 浏览 磊 中 实现 灵活 的 逐 帆 动画 ， 比 
如 用 一 张 拼合 图 片 (image sprite) 作为 背景 ， 然 后 用 JavaScript 动态 地 控制 
它 的 background-position。 你 甚至 还 可 以 找到 一 些 专门 为 此 设计 的 小 型 类 
库 ! 我 们 能 否 只 借助 清 素 易 读 的 CSS 代码 就 满足 这 个 需求 呢 ? 


解决 方案 


假设 我 们 已 经 把 动画 中 的 所 有 帧 全 部 拼合 到 一 张 PNG 图 片 中 了 ， 如 
8-14 所 示 。 

















然后 用 一 个 元 素来 容纳 这 个 加 载 提示 “《“ 别 乐 了 在 里 面 写 一 些 文字 ， 来 确 





保 可 访问 性 )， 并 把 它 的 宽 遍 设置 为 单 帧 的 矿 才 : 





<div class="loader">Loading...</div> 


.loader { 
width: 166px; height: 166px; 
background: url(img/loader.png) 8 6; 


Ve 


(关于 APNG 的 更 多 信息 ， 请 参阅 wikipedia.org/wiki/APNG。 


text-indent: 266%; 
white-space: nowrap; 
overflow: hidden; 


} 


目前 它 的 效果 如 图 8-15 所 示 : 第 一 帧 显示 出 来 了 ， 但 还 没有 动画 效 
果 。 如 果 我 们 尝试 对 它 应 用 各 种 不 同 的 background-position 值 ， 就 会 发 
现 -168px 6 会 让 它 显 示 出 第 二 帧 ，-266px 6 会 显示 第 三 帧 ， 以 此 类 推 。 于 
是 我 们 的 第 一 反应 就 是 用 下 面 的 方法 来 让 它 动 起 来 : 





@keyframes loader { 
to { background-position: -8066px 60; } 





} 

.loader { 
width: 166px; height: 166px; 
background: url(img/loader.png) 6 9; 
animation: loader 1s infinite linear; 
/* 把 文本 隐藏 起 来 */ 
text-indent: 266%; 
white-space: nowrap ; 
overflow: hidden; 

} 

但 是 ， 在 下 面 这 几 幅 静态 截图 (动画 每 经 历 167ms 时 的 情形 ) 中 ， 你 

会 发 现 这 样 其 实 是 行 不 通 的 (参见 图 8-16)。 





我 们 似乎 走 错 了 路 ， 但 其 实 已 经 相当 接近 真正 的 答案 了 。 这 里 的 秘诀 是 
采用 steps() 这 个 调 速 函数 ， 而 不 是 基于 贝 守 尔 曲线 的 调 速 阴 数 。 


你 可 能 会 问 :“ 采 用 什么 调 速 函数 ?! ” 束 像 我 们 在 前 一 节 所 看 到 的 ， 





所 有 基于 贝 塞 尔 曲 线 的 调 速 昌 数 都 会 在 关键 帧 之 间 进 行 插 值 运算 ， 从 而 产生 
平滑 的 过 渡 效 末 。 这 个 特性 很 棒 ， 因 为 在 通 秆 情况 下 ， 平 请 的 过 渡 确 实 是 我 
们 使 用 CSS 过 渡 和 动画 的 原因 。 但 在 眼前 的 场景 下 ， 这 种 平滑 特性 恰恰 毁 
挥 了 我 们 想 实现 的 逐 帧 动画 效果 。 


与 贝 赛 尔 曲线 调 速 困 数 过 然 不 同 的 是 ，steps() 会 根据 你 指定 的 步 进 数 





图 8-15 

加 载 提 示 的 第 一 帧 显示 出 来 了 ， 
但 还 没有 动画 效果 

图 8-16 


实现 逐 帧 动画 的 首次 尝试 失败 了 ， 
因为 我 们 并 不 需要 帧 与 帧 之 间 的 
过 渡 状 态 


时 间 


图 8-17 
对 比 steps(8)、linear 以 及 默认 
的 ease 这 三 种 调整 函数 的 差异 








致 租 


量 ， 把 整个 动画 切 分 为 多 帧 ， 而 且 整 个 动画 会 在 帧 与 帧 之 间 硬 切 ， 不 会 做 任 
何 插值 处 理 。 通 常 ， 这 种 便 切 效果 是 我 们 极力 避免 的 ， 因 此 我 们 很 少 听 到 关 
于 steps() 的 讨论 。 在 CSS 调 速 函数 的 志 界 里 ， 基 于 贝 塞 尔 曲 线 的 调 速 耳 
数 就 像 是 处 处 受 人 追 兵 的 白天 鹅 ， 而 steps() 则 是 劳 人 避 之 唯 刺 不 及 的 丑 小 
孙 。 不 过 ， 在 这 个 案例 中 ， 后 者 却 是 我 们 通 加 成 功 的 关键 。 一 旦 把 整个 动画 
的 代码 修改 为 下 面 的 形式 ， 这 个 加 载 提示 就 瞬间 变 成 我 们 想 要 的 样子 了 : 








animation: loader 1s infinite steps(8) ; 


别 筷 了 steps() 还 接受 可 选 的 第 二 个 参数 ， 其 值 可 以 是 start 或 end 
(默认 值 )。 这 个 参数 用 于 指定 动画 在 每 个 循环 周期 的 什么 位 置 发 生 帧 的 切换 
动作 《〈 关 于 默认 值 end 的 行为 ， 参 见 图 8-17)， 但 实际 上 这 个 参数 用 得 并 不 
多 。 如 果 我 们 只 需要 一 个 单 步 切换 效果 ， 还 可 以 使 用 step-start 和 step- 
end 这 样 的 傈 写 属 性 ， 它 们 分 别 等 同 于 steps(1，start) 和 steps(1，end)。 





本 rm ni 则 play.csssecrets.io/frame-by-frame 
向 Simurai (Chttp:/simurai.com/) 脱 避 致 数 ， 感 谢 他 在 “用 steps() 


实现 拼合 图 片 的 动画 效果 ” (http://simurai.com/blog/2012/12/03/step-animation) 
这 篇 文章 中 提出 了 这 个 实用 的 技巧 。 


http://w3.org/TR/css-animations 相关 规范 
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基本 的 CSS 动画 ,“ 逐 帧 动画 ” 





难题 


还 记得 当年 的 <blink> 标签 吗 ? 当然 记得 。 这 个 标签 已 经 成 为 了 这 个 
行业 的 一 枚 文化 印记 ， 见 证 了 那个 “ 刀 耕 火种 ”的 年 代 ， 而 今 已 随 大 江东 
去 ， 长 存 谈 舌 声 中 。 这 个 标签 一 直人 饱 受 诉 病 ， 一 个 原因 在 于 它 违 育 了 结构 和 
样式 分 离 的 准则 ， 为 一 个 更 重要 的 原因 在 于 ， 它 在 20 世纪 90 年 代 末 期 被 滥 
用 了 ， 而 这 对 于 当时 的 互联 网 用 户 来 说 简直 就 是 一 场 灾难 。 其 至 它 的 发 明 者 
Lou Montulli 也 曾 这 样 说 道 :“( 我 认为 ) blink 标签 是 我 为 互联 网 所 创造 的 最 
糟糕 的 东西 。” 


现在 <blink> 带 来 的 慎 梦 早已 远离 我 们 ， 但 有 时 候 我 们 却 不 得 不 承认 ， 
闪烁 动画 仍然 是 不 可 或 缺 的 。 我 们 一 开始 可 能 会 极力 排斥 这 个 想法 ， 但 总 有 
一 天 会 意识 到 ， 在 东 些 使 用 场景 下 ， 闪 烁 效果 对 可 用 性 是 有 益 的 ， 而 不 是 有 
害 的 。 

有 一 种 常见 的 用 户 体验 设计 手法 ， 就 是 通过 数 次 闪烁 〈 不 超过 三 次 ) 来 
提示 用 户 界面 中 有 某 处 发 生 了 变化 ， 或 者 用 来 凸显 出 当前 链接 的 目标 “如 采 
页 面 中 某 元 素 的 ID 与 URL 中 的 #hash 相 匹配 ， 则 它 就 是 链接 的 目标 )。 在 
此 类 场景 下 使 用 闪烁 ， 可 以 有 效 地 把 用 户 的 注意 力 引 导 到 茶 个 特定 区 域 。 只 
要 我 们 把 内 烁 的 次 数 限 制 在 一 定 范 围 之 内 ， 就 可 以 完全 避免 “blinky> 标签 
的 那 种 负面 作用 。 为 一 种 取 其 精华 (有效 引导 用 户 的 注意 力 ) 同 时 茎 其 粳 煌 
( 令 用 户 分 心 、 烦 躁 ， 甚至 可 能 诱发 壮 症 ) 的 方法 ， 是 让 闪烁 过 程 “ 平 滑 ” 
起 来 (也 就 是 说 ， 其 效果 不是“ 开 ”和 “ 关 ” 状 态 之 间 的 便 切 ， 而 是 让 这 两 
个 状态 的 切换 具有 一 个 平滑 的 过 渡 )。 


不 过 ， 如 何 才能 实现 上 述 要 点 呢 ? <blink> 标签 有 一 个 纯 CSS 版 的 蔡 
代 物 ， 就 是 text-decoration: blink， 但 它 的 功能 极为 有 限 ， 无 法 满足 上 
述 定制 需求 ， 而 且 就 算 这 个 属性 的 功能 已 经 够 用 了 ， 它 的 浏览 郁 支 持 度 也 相 
当 差 。 那 我 们 可 以 用 CSS 动画 来 实现 它 吗 ? 还 是 说 只 能 求助 于 JavaScript 这 
最 后 一 根 救 命 稻 草 ? 









































人 4 


闪烁 效果 


8-18 
这 段 文字 的 颜色 在 三 秒 钟 ( 三 个 
循环 周期 ) 内 的 变化 过 程 


解决 方案 


用 CSS 动画 确实 可 以 实现 各 种 类 型 的 内 烁 效果 ， 比 如 对 整个 元 又 进行 
闪烁 〈 通 过 opacity 属性 )， 对 文字 的 颜色 进行 内 烁 〈 通 过 color 属性 )， 
对 边框 进行 内 烁 〈 通 过 border-color 属性 )， 等 等 。 在 下 面 的 内 容 中 ， 我 
们 将 只 讨论 文字 的 内 炬 效果， 因为 这 是 最 常见 的 需求 。 不 过 ， 我 们 介绍 的 原 
理 同 样 适用 于 元 素 其 他 部 分 的 闪烁 效果 。 


要 实现 一 个 平滑 的 内 烁 效果 其 实 很 傈 单 。 我 们 迈 出 的 第 一 步 可 能 是 这 
样 的 : 


























@keyframes blink-smooth { to { color: transparent } } 


.highlight { animation: 1s blink-smooth 3; } 





这 基本 上 成 功 了 。 这 段 文字 可 以 平滑 地 从 它 原 来 的 颜色 淡化 为 透明 色 ， 
但 随后 会 生硬 地 跳 回 原来 的 颜色 。 我 们 把 文字 颜色 随时 间 发 生 的 变化 用 图 形 
的 方式 记录 下 来 (参见 图 8-18)， 有 助 于 我 们 接 下 来 的 分 析 。 


这 可 能 正 是 我 们 预 完 设想 的 效果 。 如 末 是 这 样 的 话 ， 那 就 大 功 告 成 了 ! 
但 如 采 我 们 而 望 文字 颜色 的 变化 不 仅 是 平滑 隐 去 的 ， 同 时 还 是 平滑 显现 的 ， 
那 就 还 得 继续 努力 一 番 。 为 了 达到 这 个 结 东 ， 我 们 想到 了 一 个 办 法 : 修改 天 
键 帆 ， 让 状态 切换 发 生 在 每 个 循环 周期 的 中 间 。 





























@keyframes blink-smooth { 56% { color: transparent } } 


.highlight { 
animation: 1s blink-smooth 3; 


} 


现在 它 似乎 就 是 我 们 所 期 望 的 效果 了 。 不 过 这 里 还 有 一 个 问题 ,虽然 
在 这 个 特定 的 动画 中 表现 得 不 是 很 明显 (因为 颜色 或 透明 度 的 过 渡 很 难 体 
现 出 各 种 调 速 油 数 的 特征 )， 但 我 们 心里 一 定 要 明白 :这 个 动画 一 直 是 处 在 
加 速 过 程 中 的 ， 不 论 是 在 文字 显现 还 是 隐 去 时 一 一 这 对 某 些 动画 来 说 可 能 
会 显得 不 太 目 然 〈“ 比 如 类 似 脉 搏 跳动 的 动画 )。 在 那 种 情况 下 ， 我 们 可 以 从 
工具 箱 中 请 出 另 一 件 法 宝 : animation-direction。 


animation-direction 的 唯一 作用 就 是 反 转 每 一 个 循环 周期 
Creverse)， 或 第 偶数 个 循环 周期 alternate)， 或 第 奇数 个 循环 周期 
(alternate-reverse)。 它 的 伟大 之 处 在 于 ， 它 会 同时 反 转 调整 水 数 ， 
从 而 产生 更 加 通 真 的 动画 将 末 。 我 们 可 以 把 它 用 在 需要 闪烁 的 元 素 上 ， 
比如 : 























@keyframes blink-smooth { to { color: transparent } } 


.highlight { 
animation: 


.5S blink-smooth 6 alternate; 


请 注意 ， 我 们 必须 把 动画 循环 的 次 数 翻 倍 《〈 而 不 是 像 前 面 的 方法 那样 把 
循环 周期 的 时 间 长 度 翻 倍 )， 因 为 现在 一 次 淡 入 淡出 的 过 程 是 由 两 个 循环 周 
期 组 成 的 。 基 于 同样 的 原因 ， 我 们 也 要 把 animation-duration 减 半 。 

如 果 我 们 想得到 的 是 一 个 平滑 的 闪烁 动画 ， 现 在 就 可 以 收工 了 。 不 过 ， 
假如 我 们 只 想得到 最 普通 的 那 种 闪烁 效果 呢 ? 应 该 如 何 实现 ? 我 们 首先 想到 
的 办 法 可 能 是 : 





PS 

















@keyframes blink { to { color: transparent } } 


.highlight { 
animation: 1s blink 3 steps(1); 


上. 





但 是 ， 这 个 尝试 会 华丽 地 失败 : 什么 动静 也 没有 。 原 因 在 于 ，steps(1) 
本 质 上 等 同 于 steps(1，end)， 它 表示 当前 颜色 与 transparent 之 间 的 过 
渡 会 在 一 次 步 进 中 完成 ， 于 是 颜色 值 的 切换 只 会 发 生 在 动画 周期 的 末尾 ( 参 
见 图 8-20)。 因 此 ， 我 们 会 看 到 起 始 值 贯穿 于 整个 动画 周期 ， 而 终止 值 只 在 
动画 结尾 的 无 限 短 的 时 间 点 处 出 现 。 如 果 我 们 改 用 steps (1，start)， 结 果 
就 完全 相反 了 : 颜色 值 的 切换 会 发 生 在 动画 周期 最 开始 ， 于 是 我 们 始终 只 能 
看 到 纯 透 明 的 文字 ， 没 有 任何 动画 或 内 烁 效果 。 

以 这 个 逻辑 来 看 ， 我 们 接 下 来 可 以 换 用 steps(2) 来 磁 碰 运气 ， 两 种 步 
进 方式 (start 或 end) 都 可 以 试 一 下 。 现 在 我 们 终于 可 以 看 到 闪烁 效果 了 ， 
但 这 个 闪烁 效果 要 么 是 由 半 透 明 切 到 纯 透 明 ， 要 么 是 由 半 透 明 切 到 实 色 ， 原 
因 同 上 。 由 于 我 们 无 法 通过 配置 steps() 来 让 这 个 切换 动作 发 生 在 动画 周期 
的 中 间 点 《只 能 发 生 在 起 点 或 终点 )， 唯 一 的 解决 方案 是 调整 动画 的 关键 帧 ， 
让 切换 动作 发 生 在 50% 处 ， 就 像 我 们 在 本 方刚 开始 所 做 的 那样 : 














@keyframes blink { 56% { color: transparent } } 


.highlight { 


图 8-19 
animation-direction 属 性 接 
受 的 值 共 有 四 个 ， 本 图 以 一 段 从 
black 变化 到 transparent 并 循 
环 三 次 的 动画 为 例 ， 展 示 了 这 四 
个 值 各 自 对 动画 的 作用 效果 


时 间 
8-20 
实际 上 steps(1) 对 动画 的 作用 
结果 是 这 样 的 


animation: 1s blink 3 steps(1); /* 或 用 step-end */ 
) 


现在 终于 成 功 了 ! 谁 能 猜 到 这 个 传统 的 便 切 闪烁 居然 会 比 现代 流畅 的 平 
滑 闪 烁 更 难 实现 ? CSS 永远 让 你 惊喜 不 断 ……… 


play.csssecrets.io/blink 


国 CSS 动画 


http://w3.org/TR/css-animations 





打字 动 


图 





基本 的 CSS 动画 ,，“ 逐 帧 动画 "， “闪烁 效果 ” 





难 十 


有 些 时 候 ， 我 们 希望 一 段 文本 中 的 字符 逐个 显现 ， 模 拟 出 一 种 打字 的 
效果 。 这 个 效果 在 技术 类 网 站 中 尤为 流行 ， 用 等 宽 字 体 可 以 营造 出 一 种 终 
Ra 了 的 感觉 。 如 果 使 用 得 当 ， 它 确实 可 以 让 整个 网 页 的 设计 感 提 升 一 








通 稼 来 说 ， 这 个 效果 需要 用 到 一 堆 又 具 又 长 、 难 以 理解 的 JavaScript 代 
但。 实际 上 这 完全 是 纯 表 现 层 的 问题 ， 但 用 CSS 来 实现 似乎 仍 是 病人 说 梦 。 
慢 着 ， 或 许 它 并 非 遥 不 可 及 ? 





解决 方案 





核心 思路 就 是 让 容器 的 宽度 成 为 动画 的 主体 ; 把 所 有 文本 包 囊 在 这 个 容 
器 中 ， 然 后 让 它 的 宽度 从 e 开始 以 步 进 动画 的 方式 、 一 个 字 一 个 字 地 扩张 到 
它 应 有 的 宽度 。 你 可 能 已 经 察觉 到 了 ， 这 个 方法 是 有 局 限 的 ， 它 并 不 适用 于 
多 行文 本 "。 然 而 幸运 的 是 , 在 绝 大 多 数 情况 下 , 我 们 把 这 种 效果 应 用 在 类 似 
标题 的 单行 文本 上 。 

另外 一 件 需要 注意 的 事情 是 ， 动 画 的 持续 时 间 越 长 ， 动 画 效 果 越 差 : 持 
续 时 间 较 短 的 动画 会 让 界面 显得 更 加 精致 ， 在 某 些 场景 下 还 是 有 益 于 可 用 性 
的 。 反 之 ， 动 画 的 持续 时 间 越 长 ， 越 容易 让 用 户 感到 厌烦 。 因 此 ， 即 使 这 个 
技巧 可 以 用 在 大 段 文 本 身上 ， 也 不 一 定 是 个 好 主意 。 

好 的 ， 我 们 开始 写 代码 吧 ! 假设 我 们 需要 把 这 个 动画 效果 应 用 到 最 顶级 
的 标题 (<h1>) 上 ， 并 且 已 经 它 把 设置 为 等 宽 字体 了 ， 结 构 代码 如 下 所 示 
(效果 见 图 8-22) ; 





























<h1>CSS is awesomel</h1> 


我 们 可 以 很 容易 地 给 它 加 上 一 个 动画 ， 让 它 的 宽度 从 8 变化 到 完整 的 宽 
度 ， 束 像 这 样 : 





QD 理论 上 来 说 ， 我 们 也 可 以 让 多 行文 本 实现 这 种 动画 效果 ， 但 这 样 一 来 就 需要 给 每 一 行文 本 包 
一 层 容器 ， 同 时 还 要 维护 合适 的 动画 延 时 〈 也 就 是 说 ， 整 件 事情 得 不 偿 失 )。 
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我 们 在 为 CERN ( 欧洲 核子 研究 
委员 会 ) 打造 一 款 单行 模式 浏览 
器 的 Web 版 模拟 器 ( http://line- 
mode.cern.ch ) 的 时 候 ， 用 到 了 该 
动画 效果 的 一 个 变种 


CSS 1is awesome! 


8-22 
我 们 的 起 点 


CSS 
1s 
awesome! 


CSS 15s 
awesome! 


CSS 1is awesome! 


图 8-23 
我 们 尝试 打字 动画 的 第 一 步 ， 完 
全 没有 模拟 出 打字 的 感觉 


CS: 


CSS 1s av 


CSS is aweson 
图 8-24 
我 们 的 第 二 次 尝试 已 经 相当 接近 


@keyframes typing { 
from { width: 6 } 


} 

h1 { 
width: 7.7em; /* 文本 的 宽度 */ 
animation: typing 8s; 

} 





代码 看 起 来 非 第 合理 ， 对 吧 ? 但 我 们 在 图 8-23 中 可 以 看 到 ， 它 产生 的 
结果 简直 就 是 车 祸 现 场 ， 跟 我 们 想 要 的 打字 效 来 一 点 关系 也 没有 。 


你 可 能 已 经 猜 到 问题 出 在 哪儿 了 。 首 先 ， 我 们 忘 了 用 white-space: 
nowrap; 来 阻止 文本 折 行 ， 因 此 文本 的 行 数 会 随 着 宽度 的 扩张 不 断 变化 。 其 
次 ， 我 们 忘 了 加 上 overflow: hidden;， 所 以 超出 宽度 的 文本 没有 被 裁 切 
掉 。 不 过 ， 当 我 们 修复 了 这 两 个 小 问题 之 后 ， 真 正 的 大 问题 才 会 浮 出 水 面 
(参见 图 8-24 )。 


加 最 明显 的 问题 是 整个 动画 是 平滑 连贯 的 ， 而 不 是 逐 字 显现 的 。 

国 “ 另 一 个 不 那么 明显 的 问题 是 ， 目 前 我 们 已 经 用 em 单位 指定 了 宽度 ， 
虽然 它 比 像 系 单位 要 好 一 些 ， 但 仍然 不 够 理想 。 这 个 宽度 为 什么 是 
7.7 ? 我 们 是 怎么 算出 来 的 ? 


我 们 可 以 用 steps() 来 修复 第 一 个 问题 ， 就 像 “ 逐 帧 动画 ”和 “闪烁 效 
果 ” 中 所 做 的 那样 。 但 不 和 位 的 是 ， 我 们 所 需要 的 步 进 数量 是 由 字符 的 数量 来 
决定 的 ， 这 显然 是 很 难 维护 的 ， 而 且 对 于 动态 文字 来 说 更 是 不 可 能 维护 的 。 
不 过 ， 我 们 稍 后 将 看 到 ， 可 以 用 一 小 段 JavaScript 代码 来 把 这 件 事情 自动 化 。 

第 二 个 问题 可 以 通过 ch 单位 来 缓解 。 这 个 ch 单位 是 由 CSS 值 与 单位 
《第 三 版 ) Chttp:/w3.org/TR/css3-values) 规范 引入 的 一 个 新 单位 ， 表 示 “0” 
字形 的 宽度 。 它 应 该 是 最 不 为 人 知 的 一 个 新 单位 ， 因 为 在 绝 大 多 数 场景 下 ， 
我 们 并 不 关心 0 这 个 字符 显示 出 来 到 底 有 多 宽 。 但 对 等 宽 字 体 来 说 ， 这 是 个 
例外 。 在 等 宽 字 体 中 ,“0” 字 形 的 宽度 和 其 他 所 有 字形 的 宽度 是 一 样 的 。 因 
此 ， 如 采 我 们 用 ch 单位 来 表达 这 个 标题 的 客 度 ， 那 取 值 实际 上 就 是 字符 的 
数量 : 在 这 个 例子 中 就 是 15。 


我 们 把 上 面 的 这 些 想法 综合 起 来 : 

































































@keyframes typing { 
from { width: 6; } 
} 


hi { 
width: 15ch; /* 文本 的 宽度 */ 
overflow: hidden; 
white-space: nowrap; 
animation: typing 6s steps(15); 


在 图 8-25 所 展示 的 这 几 帧 截图 中 可 以 看 到 ， 我 们 终于 得 到 了 期 望 已 久 
的 效果 : 这 段 文 字 是 逐 字 显现 出 来 的 。 不 过 ， 它 看 起 来 还 不 够 台 真 。 你 能 
出 它 还 缺 了 点 什么 吗 ? 


画龙点睛 的 最 后 一 步 ， 就 是 给 它 加 上 一 个 闪烁 的 光标 。 我 们 在 上 一 方 中 
已 经 弄 清楚 了 闪烁 动画 的 原理 。 在 这 个 例子 中 ， 我 们 可 以 用 一 个 伪 元 素来 生 
成 光标 ， 并 通过 opacity 属性 来 实现 办 烁 效果 ; 我 们 也 可 以 用 右边 框 来 模拟 
光标 效果 ， 这 样 束 可 以 把 有 限 的 伪 元 素 资 源 市 省 下 来 留 作 他 用 : 


























@keyframes typing { 
from { width: 6 } 
} 
@keyframes caret { 
56% { border-color: transparent; } 


1 
h1 { 

width: 15ch; /* 文本 的 宽度 */ 

overflow: hidden; 

white-space: nowrap; 

border-right: .65em solid; 

animation: typing 6s steps(15), 

caret 1s steps(1) infinite; 

) 








请 注意 ， 与 文字 逐个 跳出 的 动画 不 同 ， 光 标的 闪烁 动画 是 需要 无 限 
循环 的 (即使 所 有 的 文字 都 显示 完整 之 后 仍然 如 此 )， 因 此 我 们 需要 用 到 
infinite 关键 字 。 此 外 ， 这 里 并 不 需要 指定 边框 的 颜色 ， 因 为 我 们 希望 边 
框 颜色 上 自动 与 文字 颜色 保持 一 致 。 在 图 8-26 中 ， 你 可 以 看 到 整个 动画 效果 
的 几 幅 静态 截图 。 


这 个 动画 现在 的 表现 相当 完美 ， 不 过 还 不 是 很 易于 维护 ;需要 根据 每 
个 标题 的 字数 来 给 它们 分 别 指定 不 同 的 宽度 样式 ， 而 且 还 需要 在 每 次 改变 
标题 内 容 时 同步 更 新 这 些 宽 度 样 式 。 显 然 ， 这 种 场景 正 是 JavaScript 的 用 武 
之 地 : 

















$$('h1').forEach(function(h1) { 
var len = hi.textContent.length, s = hi1.style; 


s.width = len + 'ch'; 
s.animationTimingFunction = "steps("+len+"),steps(1)"; 


7 





只 需 短 短 几 行 JavaScript 代码 ， 就 可 以 取得 两 全 其 美的 结果 : 不 仅 动 画 
生动 逼真 ， 而 且 代 码 匈 于 维护 ! 

所 有 这 些 都 是 极 好 的 ， 但 如 宁 浏 览 硕 不 文 持 CSS 动画 的 话 又 会 如 何 ? 
本 质 上 所 有 与 动画 相关 的 效 末 都 会 被 于 大 ， 所 以 最 终 起 作用 的 样式 只 有 如 下 
几 行 : 








CS 

CSS 1s a 

CSS is aweso 
8-25 


现在 这 段 文字 终于 可 以 逐 字 显现 
了 ， 但 似乎 还 缺 了 点 什么 


CS 
CSS 1is a 


CSS is aweso 


图 8-26 
在 加 上 逼真 的 闪烁 光标 之 后 ， 我 
们 的 动画 终于 圆满 完成 了 


hi { 
width: 15ch; /* 文本 的 宽度 */ 
overflow: hidden; 
white-space: nowrap; 
border-right: .65em solid; 


图 8-27 CSS 1s awesome! 

对 于 不 支持 CSS 动画 的 浏览 器 来 

说 ， 它 们 得 到 的 回 退 样式 是 这 样 CSS 1S awesome! 

的 ( 上 图 : 支持 ch 单位 的 情况 ， 

下 图 : 不 支持 ch 单位 的 情况 ) 浏览 器 是 否 支 持 ch 单位 会 决定 最 终 的 显示 效果 ， 实 际 显示 出 的 回 退 样 
式 将 是 图 8-27 所 示 的 两 种 情况 之 一 。 如 果 你 不 希望 出 现 第 二 种 情况 ， 也 可 
以 补 一 行 以 em 作为 单位 的 回 退 样式 。 如 果 你 不 希望 在 回 退 结果 中 看 到 一 个 
不 能 闪烁 的 光标 ， 可 以 把 生成 光标 的 边框 样式 写 到 关键 帧 中 ， 这 样 当 浏览 
不 支持 动画 时 ， 就 只 会 显示 出 一 条 看 不 见 的 透明 边框 了 。 代 码 如 下 所 示 : 








@keyframes caret { 
56% { border-color: currentColor; } 


' 
hi { 
J tat 
border-right: .65em solid transparent; 
animation: typing 6s steps(15), 
caret 1s steps(1) infinite; 
| 


这 差不多 已 经 实现 了 回 退 措施 所 能 产生 的 最 佳 结 果 : 在 旧版 浏览 厅 中 ， 
没有 动画 效 末 ， 但 同时 也 没有 任何 功能 失 笛 的 情况 出 现 ， 所 有 的 文本 都 是 具 
有 完美 可 访问 性 的 ， 而 且 文 字 的 样式 也 与 我 们 的 设想 别 无 二 致 。 


Play csssecrets i0/typing 








四 CSS 动画 时 
http://w3.org/ 工 R/css-anlmations 相关 规范 


加 CSS 值 与 单位 
http://w3.org/TR/css-values 








状态 平滑 的 动画 





基本 的 CSS 动画 ，animation-direction ( 在 “闪烁 效果 ”中 曾 简 要 


提 及 ) 





难题 


不 是 所 有 动画 都 是 在 页 面 一 加 载 好 就 立即 播放 的 。 更 常见 的 情况 是 ， 
我 们 想 通 过 动画 来 响应 用 户 的 动作 ， 比 如 用 户 的 鼠标 悬 停 在 某 个 元 素 上 
(C:hover)， 或 者 按 住 鼠 标 键 〈:active)， 等 等 。 在 这 种 场景 人 下， 我们 将 无 
法 控制 动画 实际 的 循环 次 数 ， 因 为 用 户 的 动作 会 随时 中 断 动 画 ， 而 此 时 动画 
不 可 能 刚好 播放 到 我 们 事先 指定 的 循环 次 数 。 举 例 来 说 ， 用 户 的 鼠标 可 能 会 
触发 一 个 华丽 的 :hover 动画 ， 而 在 动画 还 没有 播 完 的 时 候 ， 鼠 标 就 从 元 素 
上 移 走 了 。 在 这 种 情况 下 ， 你 党 得 动画 会 如 何 收场 呢 ? 

如 果 觉 得 “动画 应 该 停留 在 当前 状态 ”或 者 “动画 应 该 平滑 地 过 渡 回 
开始 状态 ”， 那 你 就 要 大 跌眼镜 了 。 在 默认 情况 下 ， 动 画 只 会 立即 停止 播放 ， 
并 生硬 地 跳 回 开始 状态 "。 对 于 某 些 非常 细微 的 动画 来 说 ， 这 种 行为 还 算 可 
以 接受 。 但 在 绝 大 多 数 时 候 ， 这 只 会 产生 非常 生硬 的 用 户 体 验 。 我 们 有 可 能 
改变 这 种 行为 吗 ? 





QD 这 是 我 们 尽 可 能 采用 过 渡 的 另 一 个 原因 。 此 时 动画 会 生硬 地 跳 回 开 始 状 态 ， 但 过 渡 的 行为 则 
完全 不 同 ， 过 渡 会 反 向 播放 ， 从 而 平滑 地 过 渡 回 原始 状态 。 


46 ”状态 平滑 的 动画 


我 是 在 做 一 个 简单 的 网 页 时 ， 下 


2 / 了 RT | 
定 决心 要 为 这 个 问题 找到 一 个 解 工 XJUrIAN CHEAL, 
决 方案 的 。 我 当时 打算 把 这 个 网 ! A BarrrisH RUBY/RAILS DEVELOPER 
页 作为 生日 礼物 送 给 我 的 朋友 WITH A PENCHANT FOR TWEED, 


FINE COFFEE, AND HOMEBREWING. 
Julian ( http://juliancheal.co.uk )。 


请 注意 右 侧 的 圆 形 图 片 ， 这 张 图 , events around the™ 
片 原本 是 横幅 的 。 圆 形 区 域 显露 rogram flying Tr 


When not ig for clients, I wa ene 


es ee | international conferences on the intersection of 
出 的 是 图 片 的 右 半 部 分 ， 而 当 用 : 
programming and robotics. In the past, Pye 
a 的 鼠标 移 到 多 | 图 上 时 ， 它 会 会 组 5 worked as a Systems Developer at The Universit 
地 向 左 深 动 ， 从 而 显 吉 出 原先 被 of Bath for five years. More recently, I was the 
、 立 \、| /| 注 、 wj> Lead Devel Artolo. 
裁 掉 的 部 分 。 在 默认 情况 下 ， 当 ee i 


用 户 把 鼠标 移 开 时 ， 图 片 会 生硬 
地 跳 回 原始 位 置 ， 这 很 容易 让 人 
误 以 为 UI 月 坏 了 。 因 为 这 是 一 
非常 小 的 网 站 ， 而 这 张 图 片 又 非 
党 显眼 ， 所 以 我 实在 无 法 对 这 个 
问题 视而不见 





LM JULIAN CHEAL, 
A BRITISH Rusy/Rarrs DEVELOPER 
WITH A PENCHANT FOR TWEED, FINE 
| COFFEE, AND HOMEBREWING. 
| When not working for clients, I help organise fun 
events aronnd the world that teach people to 
program flying robots, I also occasionally speak at 
international conferences on the intersection of 
:programming and robotics. In the past, Pye 
worked as a Systems Developer at The Uniyersity 


| of Bath for five years. More recently, I was the 
| “Lead Developer at Artolo. 





假设 我 们 有 一 张 非常 长 的 宽 幅 照片 (比如 图 8-29)， 但 我 们 只 能 提供 
个 150x150 的 正方 形 区 域 来 展示 它 。 为 了 突破 这 种 窘境 ， 我 们 想到 了 动画 的 
方法 : 在 默认 情况 下 只 显示 这 张 照片 的 左边 缘 ， 当 用 户 跟 它 交互 〈 比 如 鼠标 
悬 停 ) 的 时 候 ， 让 它 滚动 并 显露 出 剩余 的 部 分 。 我 们 只 需要 用 到 一 个 元 素 就 
可 以 显示 这 张 图 片 了 ， 稍 后 再 给 它 的 背景 定位 属性 加 上 动画 : 
































.panoramic { 
: 156pXx; height: 156pX; 
: Url("img/naxos-greece.jpg"); 
: auto 10606%; 


8-29 

naxos-greece.jpg 这 张 图 片 的 完 
整 样 狐 ， 我 们 在 本 篇 攻略 中 会 一 
直 用 到 它 ( 照片 拍摄 者 为 Chris 


Hutchison ) 


ee ” AP 


和 一 ~ Sp A 全 大 
| 1 hy 入 
Ee a 


: > 站 了 
攻 | 








现在 ， 它 看 起 来 如 图 8-30 所 示 ， 没 有 任何 动画 效果 或 交互 效果 。 接 下 
来 ， 我 们 可 以 试 试 手动 改变 它 的 background-position 属性 值 。 实 际 上 当 
这 个 值 从 原本 的 6 6 一直 变化 到 166% 8 时 ， 我 们 就 会 看 到 这 张 图 片 从 左 侧 
一 直 滚 动 到 右 侧 的 完整 过 程 。 这 不 就 是 我 们 需要 的 动画 关键 帧 嘛 ! 











.panoramic { 
width: 156px; height: 156px; 
background: url("img/naxos-greece.jpg"); 
background-size: auto 166%; 


ry 








这 个 方法 立定 见 影 。 它 的 效果 有 些 像 全 景 视图 ， 念 佛 和 号 临 其 境 环 顾 左 。” 图 8-30 
右 。 不 过 ， 这 个 动画 是 在 页 面 加 载 后 就 立即 触发 的 ， 在 菏 些 场景 下 这 很 可 能 。 这 张 图 片 被 裁 切 后 的 效果 
会 干扰 到 用 户 。 比 如 说 ， 在 一 个 旅游 网 站 上 ， 用 户 可 能 想 集 中 注意 力 去 阅读 
纳 克 索 斯 岛 的 说 明文 字 ， 而 不 是 一 再 观 帝 这 张 全 景 图 片 。 因 此 ， 如 采 动 画 是 
当 用 忆 鼠 标 悬 停 时 才 开始 播放 的 ， 那 效 朱 就 更 加 理想 了 。 于 是 ， 我 们 接 下 来 
又 迈 出 了 这 一 步 : 











.panoramic { 
width: 156px; height: 156px; 
background: url("img/naxos-greece.jpg"); 
background-size: auto 166%; 


) 
.panoramic:hover, .panoramic:focus { 


animation: panoramic 16s linear infinite alternate; 


} 





当 我 们 把 鼠标 悬 停 到 图 片上 时 ， 它 真 的 达到 了 我 们 的 期 望 : 它 会 从 图 片 
的 最 左 侧 区 域 开 始 ， 回 右 慢 慢 滚 动 ， 并 逐渐 显示 出 图 片 的 右 侧 区 域 。 不 过 ， 
当 我 们 把 鼠标 移出 图 片 时 ， 它 就 会 生硬 地 跳 回 最 左 侧 (参见 图 8-31)。 我 们 
终于 磁 到 本 证 开头 所 摘 述 的 堵 个 问题 了! 


A JJ 下 > 代 可 7/ EL 四 疙 二 站 让， 
46 ”状态 半 冰 的 功 回 


图 8-31 

鼠标 悬 停 时 动画 是 十 分 平滑 的 ， 但 
当 鼠 标 移出 时 ， 动 画 就 直接 跳 回 初 
始 状态 了 ， 整 个 效果 功 亏 一 策 


图 8-32 
现在 鼠标 移出 后 只 会 将 动画 暂停 ， 
再 也 不 会 生硬 地 跳 回 初 始 状态 了 





为 了 修复 这 个 问题 ， 我 们 需要 换个 角度 来 思考 : 我 们 在 这 里 到 底 想 要 实 
现 什么 样 的 结果 。 我 们 需要 的 并 不 是 在 :hover 时 应 用 一 个 动画 ， 因 为 这 意 
味 关 动画 被 中 断 时 的 状态 是 无 处 保存 的 。 我 们 需要 的 是 当 失 去 :hover 状态 
时 暂停 动画 。 秆 运 的 是 ， 有 一 个 属性 正好 是 为 暂停 动画 的 需求 专门 设计 的 : 


animation-play-state ! 








因此 ， 我 们 需要 把 动画 加 在 .panoramic 这 条 样式 中 ， 但 是 让 它 一 开始 
就 处 于 暂停 状态 ， 直 到 :hover 时 再 启动 动画 。 这 再 也 不 是 添加 和 取消 动画 
的 问题 了 ， 而 只 是 暂停 和 继续 一 个 一 直 存 在 的 动画 ， 因 此 再 也 不 会 有 生硬 的 
跳 回 现象 了 。 最 终 代 码 如 下 所 示 ， 你 可 以 在 图 8-32 中 看 到 实际 效果 : 





@keyframes panoramic { 
to { background-position: 166% 6; } 
1 


.panoramic { 
width: 156px; height: 156px; 
background: url("img/naxos-greece.jpg"); 
background-size: auto 166%; 
animation: panoramic 16s linear infinite alternate; 


J 


.panoramic:hover, .panoramic:focus { 


| 


FE 7 play.csssecrets.io/state-animations 


国 CSS 动画 


http:/w3.org/ 工 R/css-anlmations 





沿 环形 路 径 平 移 的 动画 





CSS 动画 ，CSS 变形 ,， 平行 四 边 形 ， A ， “内 炬 效果 - 





难题 


几 年 前 ， 当 CSS 动画 横 空 出 世 时 ， 大 家 都 兴奋 不 已 。 当 时 Chris Coyier 
Chttp:/css-tricks.com) 问 我 有 没有 办 法 用 CSS 动画 来 让 一 个 元 系 沿 着 环形 路 
径 动 起 来 。 刚 开始 的 时 候 ， 我 以 为 这 只 是 一 逢 好 玩 的 CSS 练习 题 ， 但 后 来 
才 发 现 ， 有 不 少 实际 案例 夏 的 会 用 到 这 个 效果 。 举 例 来 滴 ，Googlet 就 用 到 
了 这 样 的 动画 效果 : 当 一 个 圈子 的 成 员 数 量 超过 11 但 仍 有 新 成 员 加 入 时 ， 
已 有 成 员 的 头像 会 在 环形 路 径 上 转动 ， 并 为 这 个 新 成 员 腾 出 空间 。 


在 俄罗斯 的 一 家 技术 网 站 habrahabrru 上 ， 我 们 还 可 以 看 到 另 一 个 有 
趣 的 例子 (参见 图 8-34)。 和 其 他 所 有 经 过 精心 设计 的 网 站 一 样 ， 它 的 404 
页 面 也 提供 了 一 个 导航 菜单 ， 引 导 用 户 跳 转 到 网 站 的 几 大 核心 页 面 。 它 别 出 
心 裁 的 地 方 在 于 ， 把 各 个 菜单 项 设计 成 了 一 颗 颗 在 环形 轨道 上 运转 的 星球 ， 
并 在 菜单 上 方 打出 标语 “ 飞 向 宇宙 中 的 另 一 颗 星 球 ”。 每 颗 星球 都 附 有 一 行 
注解 文字 ， 因 此 这 些 星 球 在 沿 着 环形 轨道 进行 移动 的 同时 ， 需 要 保持 自身 的 
角度 不 发 生变 化 ， 否 则 它们 的 注解 文字 就 会 味 乎 不 定 、 很 难看 清 。 
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图 8-33 

Google+ 在 展示 新 成 员 加 入 “ 转 
子 ”的 动作 时 ， 使 用 了 一 个 基于 
环形 路 径 的 动画 效果 


图 8-34 
俄罗斯 技术 网 站 habrahabrru 的 
404 页 面 


治 环形 路 径 平 移 的 动画 
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在 应 用 了 一 些 基 本 的 样式 之 后 ， 
我 们 的 起 点 融 是 这 样 的。 现在 我 
们 可 以 放手 玩 一 玩 CSS 动画 了 


图 8-36 
这 几 张 静态 截图 说 明 我 们 迈 出 的 
第 一 步 还 不 够 成 功 








类 似 的 例子 还 有 很 多 ， 不 一 而 足 。 可 是 ， 我 们 怎样 才能 用 CSS 来 实现 
这 样 的 效果 呢 ? 


接 下 来 要 讨论 的 是 一 个 非常 何 单 的 例子 ， 我 们 会 让 一 幅 尖 像 图 片 沿 看 
环形 路 径 动 起 来 ， 可 以 看 作 是 上 述 Google+ 效果 的 简化 版 本 。 结 构 代 码 是 
这 样 的 : 

<div class="path"> 


<img src="lea.jpg”class="avatar”/> 
</div> 


在 开始 考虑 动画 之 前 ， 我 们 先 给 它 加 上 一 些 基本 的 样式 〈 比 如 斥 寸 、 硼 
景 、 外 边 距 等 )， 这 样 它 就 会 变 成 图 8-35 中 的 样子 了 。 这 些 样 式 是 相当 基 
础 的 ， 这 里 就 不 详细 展开 了 ， 但 如 果 你 对 此 还 有 一 些 疑问 的 话 ， 可 以 自己 研 
究 一 下 后 面 的 示例 链接 。 有 一 点 需要 我 们 牢记 在 心 : 这 条 环形 路 径 的 直径 是 
369px， 因 此 半径 就 是 1586px ”。 


在 添加 完 基 本 的 样式 之 后 ， 我 们 就 要 开始 思考 动画 了 。 我 们 希望 这 个 头 
像 顺 着 外 于 的 橙色 大 圆 以 转圈 的 方式 进行 移动 。 如 何 利用 CSS 动画 来 达到 
这 个 目的 呢 ? 当 这 个 问题 拦 在 面前 的 时 候 ， 很 多 人 可 能 会 不 加 思索 地 写 出 下 
面 的 代码 : 





























@keyframes spin { 
to { transform: rotate(1turn); } 


} 
.avatar { 
animation: spin 3s infinite linear; 
transform-origin: 56% 156px; /* 156px = 路 径 的 半径 */ 
b 


这 一 步 近 出 的 方向 是 正确 的 ， 但 问题 在 于 ， 它 不 仅 让 头像 沿 着 环形 路 径 
转动 ， 同 时 还 会 让 头像 自身 旋转 〈 如 图 8-36 所 示 )。 比 如 说 ， 当 头像 转 了 半 
圈 的 时 候 ， 是 头 朝 下 的 。 如 果 有 文字 的 话 ， 那 文字 也 会 是 颠倒 的 ， 这 在 可 读 





性 方面 可 是 一 个 严重 的 问题 。 因 此 我 们 希望 它 只 是 沿 着 环形 进行 移动 ， 同 时 
保持 自己 本 来 的 朝向 。 





QD 如 果 你 还 不 确定 如 何 用 CSS 来 生成 环形 ， 请 参阅 “ 自 适 应 的 椭圆 ”。 


在 当时 ， 不 论 是 我 还 是 Chris 部 没有 想 出 一 个 合理 的 办 法 。 我 们 当时 所 
能 想到 的 最 好 办 法 就 是 用 大 量 的 关键 帧 来 模拟 出 环形 的 路 径 ， 而 这 显然 从 哪 
个 层面 看 部 不 是 一 个 好 主意 。 理 命 尚 未 成 功 ， 同 志 仍 须 努 力 啊 ! 


需要 两 个 元 素 的 解决 方案 


那 次 讨论 已 经 告 一 段落 ， 但 我 心里 其 实 一 直 没 有 放下 。 终 于 ， 在 Chris 
提出 这 个 挑战 的 几 个 月 后 ， 我 交 出 了 一 份 答卷 。 这 个 答案 背后 最 主要 的 思路 
与 “平行 四 边 形 ”或 者 “菱形 图 片 ” 中 提 到 的 “ 藤 套 的 两 层 变形 会 相互 抵 
消 ” 如 出 一 入 : 用 内 层 的 变形 来 抵消 外 层 的 变形 效果 。 不 过 ， 这 一 次 可 不 是 
静态 的 抵消 了 ， 这 次 的 抵消 作用 是 贯穿 于 整个 动画 的 每 一 帧 的 。 需 要 注意 的 
是 ， 跟 上 述 两 篇 攻略 一 样 ， 我 们 需要 两 层 元 素 。 因 此 ， 需 要 把 原来 清谈 的 
HTML 代码 稍 作 处 理 ， 给 头像 侠 上 一 层 额 外 的 div: 




















<div class="path"> 
<div class="avatar"> 
<img src="lea.jpg" /> 
</div> 
</div> 


我 们 把 早先 尝试 的 那个 动画 应 用 到 .avatar 这 个 容 各 里 上 。 但 现在 的 
效 末 仍然 是 图 8-36 中 的 老 样 子 ， 因 为 这 个 元 素 日 喘 仍 然 会 旋转 。 不 过 ， 假 
设 我 们 对 头像 元 系 设置 另 一 个 旋转 动画 ， 让 它 以 相反 的 方向 自转 一 周 ， 会 发 
生 什 么 呢 ? 这 两 层 旋转 的 作用 会 在 头像 上 相互 抵消 ， 我 们 只 会 看 到 父 元 素 旋 
转 所 产生 的 环绕 动作 ! 


不 过 还 有 一 个 问题 需要 考虑 : 我 们 当前 所 面临 的 并 不 是 一 个 可 以 抵消 
的 静态 旋转 变形 ， 而 是 一 个 在 一 定 凶 度 范围 内 连 绥 运 转 的 动画 。 举 例 来 说 ， 
如 有 果 人 角度 是 固定 的 66deg， 我 们 可 以 用 -66deg 〈 或 366deg) 来 抵消 它 ， 如 
果 是 76deg， 那 我 们 可 以 用 -76deg (或 298deg) 来 抵消 。 但 现在 它 可 能 是 
6-366deg (或 8-1turn) 的 任意 角度 ， 那 我 们 该 用 什么 来 抵消 它 呢 ? 答案 比 
看 起 来 要 人 简单 得 多 。 只 需 把 头像 的 动画 设置 为 相反 的 角度 范围 〈366-6deg) 
即 可 ， 就 像 这 样 : 




















@keyframes spin { 
to { transform: rotate(1turn); } 


@keyframes spin-reverse { 
from { transform: rotate(1turn); } 


} 
.avatar { 
animation: spin 3s infinite linear; 
transform-origin: 56% 156px; /* 156px = 路 径 的 半径 */ 
) 


.avatar > img { 


animation: spin-reverse 3s infinite linear; 


} 





这 样 一 来 ， 在 任意 时 间 点 上 ， 假 设 第 一 套 动 画 的 旋转 角度 是 Xx， 那 么 第 
二 套 动画 的 旋转 角度 就 正好 是 360 - x， 因 为 前 者 的 角度 值 是 不 断 增 加 的 ， 
而 后 者 则 是 相应 减少 的 。 这 正 是 我 们 所 期 望 的 。 于 是 在 图 8-37 中 可 以 看 到 ， 








它 终于 产生 了 我 们 梦 才 以 求 的 效 末 。 
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我 们 现在 达到 了 想 要 的 动画 效果 ， 
但 代码 稍 显 有 肿 











虽然 效果 已 经 达到 了 ， 但 这 段 代 码 仍然 是 有 必要 继续 改进 的 。 比 如 次 ， 
两 套 动 画 中 的 各 个 参数 其 实 是 重复 了 两 次 的 。 如 果 我 们 需要 调整 动画 周期 的 
话 ， 还 要 修改 两 处 ， 这 显然 是 不 够 DRY 的 。 我 们 可 以 很 容易 地 解决 这 个 问 
锅 ， 让 内 层 动画 从 父 元 素 那 里 继承 所 有 的 动画 属性 ， 然 后 把 动画 名 才 天 邱 隐 
可 以 了 : 











@keyframes spin { 
to { transform: rotate(1iturn); } 


@keyframes spin-reverse { 
from { transform: rotate(1iturn); } 


} 
.avatar { 
animation: spin 3s infinite linear; 
transform-origin: 56% 156px; /* 156px = 路 径 的 半径 */ 
} 


.avatar > img { 
animation: inherit; 
animation-name: spin-reverse; 


) 








不 过 再 想 一 想 ， 如 果 只 是 为 了 反 转 第 一 套 动 画 ， 就 又 建 了 一 套 新 动画 ， 
有 点 浪费 啊 。 还 记得 我 们 在 “闪烁 效果 ”中 所 提 到 的 animation-direction 
属性 吗 ? 在 那 一 篇 攻略 中 ， 我 们 已 经 领会 到 了 alternate 这 个 值 的 实用 之 
处 。 而 在 这 里 ， 我 们 将 会 用 到 reverse 这 个 值 ， 它 可 以 得 到 原始 动画 的 反 向 
版 本 ， 这 样 我 们 就 可 以 利用 一 和 套 关键 帧 实现 两 僚 旋 转动 画 : 














@keyframes spin { 
to { transform: rotate(1iturn); } 


} 


.avatar { 
animation: spin 3s infinite linear; 
transform-origin: 56% 156px; /* 156px = 路 径 的 半径 */ 
) 


.avatar > img { 
animation: inherit; 
animation-direction: reverse; 


} 


这 样 就 差不多 了 ! 这 个 方案 可 能 还 算 不 上 完美 ， 毕 竞 需要 加 一 层 额外 
的 元 素 ， 但 是 ， 我 们 只 用 了 不 到 10 行 CSS 代码 就 实现 了 一 个 非常 复杂 的 动 
夯 ， 已 经 相当 不 容易 了 ! 


play.csssecrets.io/circular-2elements 


单个 元 素 的 解决 方案 


上 面 的 技巧 很 有 效 ， 但 还 不 够 理想 ， 因 为 它 震 要 修改 HIML 结构 。 当 
我 最 开始 想 出 这 个 技 马 时， 就 立即 与 了 一 封 邮件 发 给 CSS 工作 组 的 邮件 列 
表 ”( 那 时 候 我 还 不 是 其 中 一 员 )， 建 议 规 范 允 许 开发 者 为 同一 个 元 素 指定 多 
个 变形 原点 。 这 样 的 话 ， 只 需要 一 个 元 系 束 可 以 实现 本 市 所 讨论 的 动画 效 来 
了 ， 因 此 这 看 起 来 是 一 个 非常 合理 的 功能 需求 。 


这 次 讨论 相当 热烈 ， 把 讨论 推 品 融 潮 的 正 是 CSS 变形 规范 当时 的 一 位 
编辑 Aryeh Gregor 所 说 的 那 句 让 人 一 时 摸 不 着 头脑 的 话 : 
“transform-origin 只 是 一 个 语法 糖 而 已 。 实 际 上 你 总 是 可 以 用 
translate() 来 代替 它 。” 


























Aryeh Gregor 


他 确实 一 语 道 破 天 机 : 每 个 transform-origin 都 是 可 以 被 两 个 
translate() 模拟 出 来 的 。 比 如 ， 下 面 两 段 代 码 实际 上 是 等 效 的 : 





transform: rotate(36deg); 
transform-origin: 200px 306pX; 


transform: translate(260px，368px) 
rotate(36deg) 
translate(-260px，-366px); 

transform-origin: 6 6; 


Q) 你 可 以 在 lists.w3.org/Archives/Public/www-style/2012Feb/0201.html 读 到 完整 的 讨论 。 
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如 何 用 两 次 位 移 变形 (translate) 
来 代替 变形 原点 (transform- 
origin) 的 作用 。 红 色 圆 点 表示 
每 次 变形 的 原点 。 上 图 : 演示 了 
transform-origin 的 原理 ;下 图 : 
以 分 步 的 方式 演示 了 两 次 位 移 代替 
transform-origin 的 原理 





这 乍 看 起 来 确实 有 些 费解 ， 但 只 要 我 们 牢记 变形 函数 并 不 是 彼此 独立 
的 ， 这 个 赴 理 就 会 逐 潮 清晰 起 来 。 每 个 变形 冰 数 并 不 是 只 对 这 个 元 聚 进行 变 
形 ， 而 且 会 把 整个 元 素 的 坐标 系统 进行 变形 ， 从 而 影响 所 有 后 续 的 变形 操 
作 。 这 也 说 明了 为 什么 变形 函数 的 顺序 是 很 重要 的 ， 变 形 属性 中 不 同 函 数 的 
顺序 如 果 被 打 乱 ， 可 能 会 产生 完全 不 同 的 结果 。 如 果 你 对 此 仍 有 疑惑 ， 
8-38 应 该 可 以 帮助 你 消除 困扰 。 

















transform: rotate(36deg ) ; 
transform-origin: 166px 560pX 





一 160px 一 | 


人 = 28pPX | 





transform: translate(196pXx,56px ) ; transform: translate(166px,56pX) transform: translate(166px,56px) 
transform-origin: 6 6; rotate(36deg ) ; rotate(38deg) 
transform-origin: 6 8; translate(-166px,-56px) ; 


transform-origin: 6 08; 


因此 ， 借 助 这 个 思路 ， 我 们 就 可 以 基于 同一 个 transform-origin 来 实 
现 前 面 用 到 的 两 个 旋转 动画 〈 我 们 会 再 次 把 动画 分 成 两 套 ， 因 为 现在 它们 的 
关键 帧 已 经 完全 不 一 样 了 ) : 


@keyframes spin { 


from { 
transform: translate(56%，156pxX) 
Potate(oturn ) 
translate(-56%, -158px); 
| 
to { 
transform: translate(56%，156pxX) 
rotate(1turn) 
translate(-56%, -158px); 
| 
} 
@keyframes spin-reverse { 
from { 
transform: translate(56%,506%) 
rotate(1turn) 
translate(-56%,-506%); 
) 


transform: translate(56%,56%) 
Potate(oturn ) 
translate(-56%, -506%); 


} 
} 
.avatar { 

animation: spin 3s infinite linear; 
) 


.avatar > img { 
animation: inherit; 
animation-name: spin-reverse,; 


) 





这 上段 代码 看 起 来 胱 肿 得 可 怕 ， 但 别 着 急 ， 我 们 接 下 来 会 大 幅度 改进 人 它 
的 。 请 注意 ， 我 们 现在 已 经 不 需要 不 同 的 变形 原点 了 ， 而 这 正 是 我 们 先前 需 
要 动用 两 个 元 素 〈《 和 两 套 动 画 ) 的 唯一 理由 。 由 于 现在 所 有 变形 孙 数 所 使 用 
的 都 是 相同 的 原点 ， 我 们 可 以 把 这 两 套 动画 合并 为 一 套 ， 并 只 用 在 .avatar 
2 











@keyframes spin { 


from { 
transform: translate(56%, 156px) 
Potate(oturn ) 
translate(-56%, -156px) 
translate(56%,506%) 
rotate(1turn) 
translate(-56%, -562% ) 
} 
to { 
transform: translate(56%, 158px) 
rotate(1turn) 
translate(-56%, -158px) 
translate(56%,506%) 
Potate(oturn ) 
translate(-56%, -506%); 
) 


} 


.avatar { animation: spin 3s infinite linear; } 


代码 质量 显然 已 经 上 了 一 个 台阶 ， 但 仍然 比较 元 长 、 难 以 理解 。 我 们 可 
以 让 它 更 加 简单 直观 一 些 吗 ? 确实 还 有 几 个 值得 一 试 的 改进 方法 。 

我 们 先 从 最 简单 的 地 方 和 人手 ， 把 连续 的 translate() 变形 操作 合并 起 
来 ， 尤 其 是 translate(-56%， -156px) 和 translate(56%， 56%) 这 样 的 
情况 。 但 遗憾 的 是 ， 百 分 比值 和 绝对 长 度 是 无 法 合并 的 《除非 使 用 calc()， 
但 那样 一 来 代码 同样 会 相当 腾 肿 )。 尽 管 如 此 ， 单 纯 水 平方 同上 的 位 移 还 是 











请 注意 ， 到 了 这 一 步 ， 就 不 再 需要 两 层 HTML 元 素 了 : 我 们 可 以 把 avatar 这 个 类 直接 加 在 
图 片上 ， 然 后 就 可 以 去 挥 它 外 层 的 容 瘟 元 对 了， 因为 我 们 不 再 逢 要 对 这 两 层 元 素 分 别 设置 样 
式 了 。 
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如 果 我 们 在 一 开始 是 把 头像 居中 
的 ， 那 么 关键 帧 代码 还 可 以 再 稍 
微 精 简 一 些 ， 此 外 ， 万 一 浏览 
不 支持 动画 的 话 ， 这 个 状态 也 将 
是 我 们 得 到 的 回 退 样式 ( 这 种 样 
式 可 能 是 也 可 能 不 是 我 们 希望 看 
到 的 ) 


可 以 相互 抵消 的 ， 因 此 这 基本 上 相当 于 我 们 只 在 了 轴 上 做 了 两 次 位 移 操作 
(translateY(-156px) translateY(56%))。 此 外 ， 由 于 同一 关键 帧 内 的 两 
次 旋转 也 会 相互 抵消 ， 我 们 还 可 以 把 旋转 之 前 和 之 后 的 水 平 位 移动 作 去 掉 ， 
再 把 年 直 位 移 合并 起 来 。 这 样 一 来 就 得 到 了 如 下 的 关键 帧 : 





@keyframes spin { 


from { 
transform: translateY(156px) translateY(-56%) 
rotate(@turn) 
translateY(-156px) translateY(58%) 
rotate(1turn); 
J] 
to { 
transform: translateY(156px) translateY(-56%) 
rotate(1turn) 
translateY(-156px) translateY(58%) 
Fotate(oturn ) ; 
} 


j 


.avatar { animation: spin 3s infinite linear; } 





这 样 代码 会 稍 短 一 些 ， 重 复 度 也 稍 低 一 些 ， 但 还 不 够 好 。 我 们 还 能 更 进 
一 步 吗 ?如果 把 头像 放 在 圆心 并 以 此 作为 起 点 (如 图 8-39 所 示 )， 我 们 就 可 
以 消除 最 开始 的 那 两 个 位 移 操 作 了 ， 而 实际 上 这 两 个 位 移 在 本 质 上 所 做 的 就 
是 把 它 放 在 圆心 。 然 后 ， 这 个 动画 束 会 变 为 : 














@keyframes spin { 
from { 
transform: rotate(oturn) 
translateY(-156px) translateY(568%) 


rotate(1turn); 
} 
to { 
transform: rotate(1turn) 
translateY(-156px) translateY(58%) 
Potate(oturn ) ; 


.avatar { animation: spin 3s infinite linear; } 


这 似乎 已 经 是 我 们 在 当下 所 能 做 到 的 最 优 结 果 了 。 代 码 还 没有 彻底 满 
足 DRY 的 要 求 ， 但 已 经 相当 简短 了 。 我 们 已 经 尽 可 能 减 小 了 代码 的 重复 度 ， 
而 且 除 去 了 宛 余 的 HTML 元 素 。 如 果 要 让 它 变 得 完全 DRY， 避 免 路 径 的 半 
径 值 在 代码 中 重复 出 现 ， 那 就 需要 请 出 预 处 理 咒 了 。 这 一 步 就 作 练习 留 给 各 
位 读者 去 思考 吧 ! 
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